Horizontal list in IE8/7 is messed up. Width:auto to blame?

Hi everyone!

I have a horizontal navigation menu in the footer of the site I’m working on.
The url is: http://beta.microprobe.com
You’ve heard it all before…works in Safari and Firefox but IE sucks.

Basically it’s “stacking” in IE8/7. What’s funny, is that if I open up IE developer tools and click “IE8 Standards Mode” it’s fixed! Strangely, IE8 Standards mode doesn’t appear to be IE8’s standard mode! :lol: Seriously? Anyway, on to the pictures and code!

Here’s what is should look like:

And here’s IE8/7:

and the code:

HTML:

<div id="footernav">
<ul id="nav">
	<li><a href="http://beta.microprobe.com/">item1</a></li>
	<li><a href="http://beta.microprobe.co/">item2</a></li>	
	<li><a href="http://beta.microprobe.com/">item3</a></li>
	<li><a href="http://beta.microprobe.co/">item4</a></li>		
</ul>
</div>	

CSS:

div#footernav {
	text-align: center;
	list-style: none;
}

div#footernav ul#nav{
	margin: auto;
	display: block;
}

div#footernav ul a {
	text-align: center;
}

#footernav ul#nav li{
	width: auto;
	height: auto;
	padding: 10px;
	text-align: center;
	display: inline-block;
	float: none;
}

#index #footernav ul#nav li a{
	color: #76777d;
	text-indent: 0px;
	background: none;
	width: auto;
	font-size: 12px;
}

Looking at developer tools it looks like IE8/7 is interpreting width:auto to be width:100%. Basically giving each <li> element its own line. This can be er, “fixed” by giving each <li> a fixed with AND float:left, but that ruins the centering! I WANT IT ALL DAMNIT!

Help?

Hi,

Firstly you can’t use the same id twice in the page. You have used id=“nav” at the top and the bottom and you can’t do this. Change it to a class if you want to re-use it.

The main problem is that you have set the meta tag to emulate IE7 and that means that no version of IE will understand the display:inline-block when used on block elements, which is the method you are using to place the nav.


<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

IE8 does understand display:inline-block but you broke it by adding the meta tag. I never use the emulate meta tag as it causes more problems than it fixes and you lose all the enhancements of IE8.

I’m not sure why you needed inline-block but I guess you needed some dimensions for the inline elements.Otherwise you could have just used display:inline.

However you can fix it with some extra code to make IE emulate inline-block like this:


<!--[if IE]>    
<style type="text/css">
#footernav ul#nav li{display:inline;}
#footernav ul#nav li a{display:inline-block;height:auto!important}
</style>
<![endif]-->


However you still need to change the id I mentioned above as you can’t have 2 ids the same on the page.

Also remove those nested “children” lists from the footer.

Thanks Paul! It worked!

This all comes from the fact that I’m hacking some other dude’s WP theme. He’s got stuff hidden everywhere! I’ve never even heard of the emulate meta tag!

As far as the nested but hidden sub-nav in the footer that is again a WordPress thing. I’m using the list_posts thing to generate the navs and as I don’t want sub-navigation in the footer I’m just display:none for the ul li ul’s. Yes, I could of hand-coded the footer nav. And yes, I should have…:blush: