Drop Down Menu Broken in IE

HTML & CSS
1

I am fairly new to coding and I don’t know what to look for to debug my drop down menu in IE. BTW, I am still going through the whole thing to clean everything up (had to have this up way too quickly). I’ve read many posts here and tried many things but to no avail.

What’s going on with this menu in IE?

http://pages.videotron.com/dragon64/

If you need me to post the html code, please let me know. Here is the menu CSS :

 /* ------ Top Nav Bar ------- */

#navcontainer  {
	padding-left:25px;
}

ul#navlist { 
	font-family: arial, sans-serif;
	width:100%;	
}


ul#navlist a {
	font-weight: bold;
	text-decoration: none;
	border-top: 1px solid #33CC33;
	border-bottom: 1px solid #33CC33;
}

ul#navlist, ul#navlist ul, ul#navlist li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

ul#navlist li { 
	float: left; 
	margin: 1px 0px 1px 0px;
}

ul#navlist li a {
	color: #33CC33;
	background-color:#000;
	padding: 3px;
	border: 1px 1px 1px 1px #33CC33;
}

ul#navlist li a:hover {
	color: #E8E8E8;
	background-color: #585858;
}

ul#navlist li a:active {
	color: #cccccc;
	background-color: #003366;
	border: 1px #ffffff inset;
}

ul#subnavlist { 
	display: none;
	background-color: #000;
}

ul#subnavlist li { float: none; }

ul#subnavlist li a {
	padding: 0px;
	margin: 0px;
}

ul#navlist li:hover ul#subnavlist {
	display: block;
	position: absolute;
	font-size: 8pt;
	padding-top: 5px;
}

ul#navlist li:hover ul#subnavlist li a{
	display: block;
	width: 10em;
	border: none;
	padding: 2px;
}

ul#navlist li:hover ul#subnavlist li a:before { content: " > "; }

And yes, the map links on the left is a no-no … among other ugly codes. I am fixing those to have a nice clean site. This one is totally temporary and full of errors. The menu is giving me the most head-banging-on-keyboard headache…for now.

Thank you!

2

May I ask what the problem is? I just saw the site in Chrome, FF, Opera, and IE8 but I don’t see any difference. Are you reffering to a specific version OF IE?

3

Hi,

To fix IE7 add the rules in bold.


[B]ul#navlist li{position:relative}[/B]
ul#navlist li:hover ul#subnavlist {
    display: block;
    position: absolute;
    [B]left:0;[/B]
    font-size: 8pt;
    padding-top: 5px;
}

[B]*+html ul#navlist li:hover ul#subnavlist{top:1.7em} [/B]

IE doesn’t know where left auto is most of the time so you need to tell it explicitly.

4

Sorry Dondoe, it was IE7.

And Paul, that totally fixed it, you’re awesome. Now to study the fixes and understand what exactly you have fixed so that I can grasp the meaning of it and avoid it in the future.

Thank you so much, I now can concentrate on fixing my own bad coding on the rest of the site :slight_smile:

5

I added position:relative to the parent list item to create a context for the absolute child and then I set left:0 which makes the absolute child always appear at the left edge of the parent list item which is exactly where you want it.

Previously the absolute element’s horizontal position was auto which meant that it would be wherever the browser thought it was at the time. IE quite often gets theis wrong and the position is also affected by any text-alignment on the parent also so unless you explicitly say where it should be horizontally then the chances are it will be off a bit.