Horizontal nav ul displaying vertically in IE8 and below
I'm sure this issue has been addressed before, but I couldn't find an answer to help me, and I'm in a bit of a time crunch on this one. I thought the the problem is that IE8 and below don't recognise html5, but even when I took out the html5 tag <nav> and used an id in the <ul>, it still didn't work. Works fine in the other browsers.
The site is currently on a subdomain here:
www.drafts.dreamhosters.com/sams/index.html
The HTML:
Code:
<nav>
<div class="menu-left"><img src="images/menu-left.gif" alt="" /></div>
<ul><li class="first"><a href="index.html" class="current">Home</a></li>
<li><img src="images/menu-separ.gif" alt="" /></li>
<li><a href="boilers-heating-systems.html">Boilers & Heating</a></li>
<li><img src="images/menu-separ.gif" alt="" /></li>
<li><a href="powerflushing.html">Power Flushing</a></li>
<li><img src="images/menu-separ.gif" alt="" /></li>
<li><a href="london-qualified-plumber.html">Service Areas</a></li>
<li><img src="images/menu-separ.gif" alt="" /></li>
<li><a href="plumbing-heating-tips.html">Tips & Hints</a></li>
<li><img src="images/menu-separ.gif" alt="" /></li>
<li class="last"><a href="contact-london-plumber.html">Contact</a></li>
<div class="menu-right"><img src="images/menu-right.gif" alt="" /></div>
</nav>
<div class="clear"></div>
This is the CSS:
Code:
nav {
margin:0;
}
nav ul {
width:710px;
display:block;
list-style:none;
margin:0 0 0 1.3em;
}
nav ul li {
float:left;
height:43px;
display:block;
background:url(../images/menu-bg.gif);
}
nav ul li.first {
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
nav ul li.last {
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
margin-right:0;
}
.menu-left {
float:left;
}
.menu-right {
float:right;
margin-right:0;
}
nav ul li a {
display:block;
font-family:Arial, Helvetica, sans-serif;
color:#339;
padding:.5em .95em;
}
nav ul li a:link,
nav ul li a:visited {
text-decoration:none;
}
nav ul li:hover,
nav ul li:active {
display:block;
background:url(../images/menu-act.gif);
}
nav ul li a:hover, .current {
color:#fff;
}
I really can't figure out the problem. I've used float:left, and even added display: inline-block for good measure, with no luck. I suspect it's the issue of IE calculating the margins and padding differently? But wouldn't that just push the overflow down to the next line, while still remaining horizontal?
I know it's a bit strange, adding an img in between the li's instead of doing a right border. I'm just amending and improving the site while keeping the same basic design of the original. The original is a total trainwreck, visually and code-wise, but at least on that one the nav display properly in IE8! lol
I would sincerely appreciate any help or pointers.
Thanks everyone!
