I'm not trying to fight anyone's battles here, but I believe Rich's solution relies on IE7 (am I right, Rich?).

One thing I do see about this, is don't all users have to have IE7 for this to work?

Snib

<><

Hi Jacob,

Did you download and unzip the IE7 files? If so, did you run then from disk (using file://) or through a Web server? At the moment the IE7 folder needs to be in the root of your site (and of your disk if you use file based URLs) to function correctly, as some other files use hard-coded /IE7 paths....

Snib: the beauty of IE7 is that it's all embedded in style sheets and behavior files that can be downloaded. The main style sheet you need to include links to other style sheets and behaviors and are downloaded for IE browsers only (using conditional comments, as described below).

If you can't get it to work, try this with an IE browser:

http://Imar.Spaanjaars.Com/Demos/Men...nuWithIE7.html

If you want, you can get rid of the resizing of menu items by applying a border to "normal" menu items as well. If the border has the same color as the background color, the menu item won't get bigger when you hover over it.
Then again, I am sure Rich tried to get the concept through, without focussing on beautiful menus.....

Cheers,

Imar

Ok, now that I have a little more time to respond.

First, there is no need for insinuation, flame wars or name-calling. If I said something offensive, I apologize, that was not my intention. If you don't understand the solution that I posted, that's fine. There's no shame in that. What I was trying to illustrate was the simplest most compatible solution to the problem at hand as is possible and that your solution is taking the long, hard way around to accomplish the same thing. I feel that's one of the supreme benefits of P2P, it's a place where you can present your problems and get help from people that know the subject matter inside and out. I've looked at several different approaches to dynamic menus in the past year or so, and with all the approaches I've seen the CSS-based solution is the best, for it's simplicity, maintainability and accessibility. If I'm way over your head, please say so!

Let me explain why your solution is many times more difficult than it has to be.

Detecting the user's screen resolution is a futile undertaking, there are so many factors that are unaccounted for that makes this a very bad way to go with respect to positioning. The user can have a sidebar open, the user can be using a high resolution monitor and have their browser window set to less than the whole screen size. In a few words, there are simply too many variables to make this a viable solution. Instead of trying to fix your problem this way, let's look at why it positions where it does and why it does it that way. The JavaScript program that you have generates the dynamic menus and spits them out where ever you have your JS file placed. In your source code that happens to be outside of the <table>. Since the menus are generated outside of the <table>, by default they are positioned relative to the view port. That's why the menus move when you resize the window. Next, why don't I just tell you how to fix your JavaScript? Aside from this being much more complicated than it has to be, the JavaScript source file is packed. There's a crapload of JavaScript in there and no reasonable structure or organization to it. Anyway, because the menus are drawn outside of the <table>, that's why position: relative on the <table> or <td> doesn't do anything for you, the menus have to be drawn inside of the <table> for that to work.

When you mentioned that setting position: relative; on the <table> element did not work, I thought a good example of that in action was in order, as well as presenting a better approach to dynamic menus. Again, feel free to ask questions about that code. I didn't post this solution because I thought "my way" of being better, but rather, it was the simplest most compatible solution possible. There's nothing personal in that.

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

Richard, I believe your last messsage was directed to me, I started this thread, and you can check all my messages I did not do any name calling.

Secondly your approach is great, it is simple and saves lot of
coding time. And I agree finding the resolution is also not a good idea to postion the menn. I wish there is a beter way. I am counting on Jacob.

But the problem is your solution does not work either. I and others tried your code, it does not work on IE 6.0. You can not assume everybody is using IE 7.0. Your website should not be so browser dependent, that's not good approch either. It works on Netscape, but not on IE 6.0.
Once most of the people start using IE 7.0, then it wil be really great that one can use what you recommened indeed it is very simple.

Thanks

Hi isheikh,

I think you're missing an important point about IE7: IE7 is not really the next version of Internet Explorer. It's a JavaScript / CSS / Behaviors solution that simulates the behaviors described in various CSS recommendations that are not correctly implemented by Internet Explorer 6. Your users don't need a new browser. All *you* need to do is provide one link to the IE7 style sheet, and that's it. No client changes, no new browsers, nothing. By simply adding one link to your page, IE 6 will behave like a standards compliant browser. The browser will download the linked files, cache them and then use them to correctly implement CSS stuff.

Check the link I posted earlier with IE6: You'll find that it works the way it's supposed to work.

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

Did you try the link Imar posted? I tried it, and it does work, like Imar said.

The style link Imar is talking about is this:



Although I do not really understand this: is this SSI or something?

Snib

<><

Those are called Conditional Comments. They are an IE only feature, and usually I am not too fond of them. It's another feature used to detect browsers, and IMHO, browser detection is a thing of the past. Stick to the standards, and most things will work flawlessly.

If you need to detect something, use object detection. That is, ask the browser if it supports something before you use it.

However, in this case, since IE7 is meant to overcome issues with IE only, the use of conditional comments makes perfect sense. Other browser will ignore them, so only the browsers that need it will download the additional files.

Check out this MSDN document as a starting point to learn more about conditional comments: http://msdn.microsoft.com/library/de...omment_ovw.asp

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

yes Imar your link works on IE 6.0. I will download IE 7.0 and put IE folder in
the root of site and will try then, i am sure it will work... thanks