CSS Nav showing as unstyled list in IE 6-8

[newellweb]

For some reason that I cannot figure out, my navigation shows as a bullet-ed vertical list. It appears as if it is completely un-styled. This is only happening in IE6-8 (that I’ve noticed). IE9, Firefox, Opera, Safari all show it as desired.

Preview:
http://lushlifesalon.com/new2

Here’s my CSS:

nav {



width: 485px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

background-color:#A5CA12;

height: 48px;

margin: 0 auto;

margin-bottom: 0px;

margin-top:30px;

margin-right: 45px;

float:right;

-webkit-box-shadow: #666 0px 2px 3px;

-moz-box-shadow: #666 0px 2px 3px;

box-shadow: #666 0px 2px 3px;

border: 1px solid #000;

behavior: url(/PIE.htc);

}



nav ul {

padding:0;

margin:0;

list-style:none;

border:0;

margin:0 auto;

}



nav li {

padding:0px 5px 0px 5px;

display:block;

margin-left: 20px;

}



nav ul li a {

float:left;

margin:0 auto;

padding:15px 15px;

color:#000;

font:bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif;

text-decoration:none;

}



nav ul li a:hover {

background:#CC3399;

color:#fff;

}



nav ul li a.active {

background:#CC3399;

color:#fff;

}

Anyone have any thoughts?

[TheDoc]

You are using HTML5 elements but IE6-8 doesn’t know how to handle them. You need to be using this; http://code.google.com/p/html5shiv/

And make sure to do an HTML5 reset to make the new elements (header, article, nav, etc) display: block.

[newellweb]

Doh! Thanks :)

Now that is displayed, it is aligned like a stair case… Still only in IE6-8. Any thoughts?

[TheDoc]

Add display: inline to the li.

[TheDoc]

This is none as the staircase bug: http://haslayout.net/css/Staircase-Bug

[Author]

Posts