View Full Version : Drop downs work correctly in Firefox, but not IE

03-21-2005, 03:33 PM
This is my first posting, I hope this can be a good experience.

I have created some drop down menus on my site by using DIV tags. When a user rolls over a tag, the style of the underlying div tags changes from Hidden to Visible. Now in Firefox everything works as it should and is displayed correctly. However, when I look in IE, the tags are separated by the same distance of the size of the DIV tags. In other words, IE renders the code as if it is see the DIV tags even though they should be hidden.

Here is an example:


the style sheet is: http://www.asymethic.com/asymethic_styles_dev.css
the js file is: http://www.asymethic.com/asymethic_scripts_dev.js

My question is: How do I get IE to ignore the underlying DIV tags, and place all the items next to each other?

03-21-2005, 04:00 PM
"visibility: hidden" will cause an element to not be shown; it does however take up the same space as it would be if it were visible.
The fact the IE behaves differently probably has to do with its incorrect treatment of height.

If you want the "invisible" element to actually not be there, use "display: none" and "display: block" (in the case of a div) instead. "display: none" will take it out of the normal flow completely.

03-21-2005, 04:23 PM
Thank you for the quick and kindly response. I tried both the block and the none display options, but did not resolve my issue with IE.

However, your response makes me think that there is just something wrong in my CSS file. I will keep tweaking with it, but if you have any other ideas, please feel free to respond.

Thanks again.

03-21-2005, 05:01 PM
Got it. Thanks.

For anyone who might be having this kind of issue, you need to set the display:none originally, then when you rollover, change that distinct item so that the DIV tag is display:block, or whatever you want to use.