Please help,
I'm attempting to create this menu
http://www.cssportal.com/generators/menu.php?menu=311 for my webpage. I've tested the final result in a few browser but when i test in IE8 I get a log blank bar in the style of the menu along the top of my menu. Effectively doubling its size.
If I test in IE7/firefox/safari it doesn't have any problems.
Any ideas?
CODE:
HTML<div id="tabs31">
<ul>
<li><a href="home.html" title="" class="current"><span>HOME</span></a></li>
<li><a href="bands.html" title=""><span>BANDS</span></a></li>
<li><a href="meet.html" title=""><span>MEET THE TEAM</span></a></li>
<li><a href="faq.html" title=""><span>FAQ's</span></a></li>
<li><a href="how.html" title=""><span>HOW TO FIND US</span></a></li>
<li><a href="oxjam.org.uk" title=""><span>Oxjam Official</span></a></li>
<li><a href="contact.html" title=""><span>CONTACT</span></a></li>
</ul>
</div>
CSS#tabs31{
position:relative;
display:block;
height:39px;
font-size:11px;
font-weight:bold;
background:transparent url(images/bgOFF1.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
border-top:4px solid #B30000;
}
#tabs31 ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
}
#tabs31 ul li{
display:block;
float:left;
margin:0;
}
#tabs31 ul li a{
display:block;
float:left;color:#666;
text-decoration:none;
padding:11px 20px 0 20px;
height:23px;
background:transparent url(images/bgDIVIDER1.gif) no-repeat top right;
}
#tabs31 ul li a:hover,#tabs31 ul li a.current{
color:#B30000;
background:#fff url(images/bgON1.gif) no-repeat top right;
}
