IE 6 & 7, Inline-Block UL centering issue

HTML & CSS
1

Hi all,

I have an issue with a nav UL I need centred, it is centred on browsers except IE6 and IE7.

The code is as follows:


<body>
<div id="nav-container">
	<ul id="nav">
		<li><a class="active" href="#">One</a> /</li>
		<li><a href="#">Two</a> /</li>
		<li><a href="#">Three</a> /</li>
	</ul>
</div><!--nav-container-->
</body>



#nav-container { background:#fff; margin-bottom:55px; position:relative; text-align:center; width:100%; z-index:20; }
#nav { display:inline-block; margin:0; overflow:hidden; }
#nav li { float:left; height:63px; line-height:63px; margin-right:5px; }

Does anyone have any idea why this won’t float in IE7?

Any help would be amazing.

Thank you!

2

I managed to fix it by applying IE specific styles to #nav - display:inline;

3

Good job. The reasoning is because IE6-7 don’t support inline-block.

In order for that behavior to be replicated, the element must have haslayout and then needs display:inline;

4

Excellent, thanks Ryan :slight_smile:

5