For my personal website, I built a very simple dropdown menu system entirely from DIVs and styles. When the user clicks on an item in the menu bar, the popup menu DIV is made visible, and when the user clicks anywhere else in the document the BODY element’s onclick handler hides the selected menu and popup.
In Firefox, everything works beautifully. Things stay exactly where they are supposed to be. But in IE, there’s an occasional shift of all content above the menu bar by a few pixels, and I can’t figure out where it’s coming from. The menu bar itself, the menu items, and the popup menus all use z-index to ensure that they are well above the general page content, and they are (generally) absolutely positioned and should not impact the layout of the content on the page (they’re peer elements directly under BODY).
If you guys could take a look at it (and aren’t afraid to venture into my little chop shop, which is by no means complete), I’d appreciate it. This difference in behavior is irking me no end, and I hate the not-knowing. I suspect it’s got something to do with the box model or something like that, but I’m not sure, and I’m at wit’s end here. The IE Developer Toolbar isn’t telling me anything useful, either. The url for the site is http://www.mikehofer.com.
I don’t have IE8 at work so I had to test in IE7, and I’m guessing this is worse than what you’re seeing in IE8. Your
.popupclass is also positioned relative, not absolute, in your stylesheet, which can cause issues in IE.