Inline Nav not working in IE7 & IE8

HTML & CSS
1

I finally got my site live today, and of course it looks wrong in IE7 & 8. Im not quite sure how to work around this. Any suggestions? Thanks in advance!

The HTML:

<code>

<nav>
<a href=“index.html”>Home</a>
<a href=“about.html”>About Us</a>
<a href=“custom_homes.html”>Custom Homes</a>
<a href=“remodels.html”>Remodels</a>
<a href=“photo_gallery.html”>Photo Gallery</a>
<a href=“testimonials.html”>Testimonials</a>
<a href=“contact.html”>Contact Us</a>

</nav>

</code>

THE CSS:

<code>

nav{
display: table;
background-color:#f5f4f4;
width: 100%;
table-layout: fixed;
}

nav a{
display:table-cell;
padding: 7px 0;
color: #333;
text-align:center;
-webkit-transition:all .2s linear;
-moz-transition:all .2s linear;
text-decoration:none;

}

nav a:hover{
color: #FFF ;
background-color: #a10324 ;
}

nav a:active {
background-color: #a10324 ;
}

</code>

2

I figured out IE8 using this script:

<script>
‘article aside footer header nav section time’.replace(/\w+/g,function(n){document.createElement(n)})
</script>

IE7 is still acting weird. blah.

3

ok, I lied. It IE8 works in XP but not Windows 7. WTF??

4

Yes, your page seems to render properly in IE8 on a WinXP box.

IE7 does not understand the display:table properties. You’ll have to choose another method of constructing your nav menu if you require IE7 compatibility.

Also, just a reminder, neither older version of IE recognizes the HTML5 <nav> tag as a block element, so it will have to be explicitly set to display:block if you decide to use a different structure for your menu.

[ot]FYI - The [noparse]

[/noparse] tags around your code should be written with square brackets rather than angle brackets.[/ot]
5

thanks for replying. any clue why IE8 works in Windows XP, but not Windows 7?

6

That sentence doesn’t quite make sense :slight_smile:

I think you may be using IE9 in Win7 and setting IE9 to IE8 mode. Those simulated modes are “simulated” but not perfect.

7

Maybe you should just use the plain old float and display block on the a tags, that will work in all browsers :). If you’re dead set on using that then you can use conditional statements or hacks to add display block and float just to the ie7 version. Cheers!

8
9

Hmmm…I will tweak around some more. I appreciate the advice :slight_smile:

10

For IE7 you could add these rules to give some basic styling to the nav.


*+html nav{
	display:block;
	text-align:center;
	width:100%;	
}
*+html nav a{
	display:inline-block;
	padding:7px 10px;	
}