PDA

View Full Version : Fix for CSS menu in IE?



boobydooby
Mar 24th, 2009, 02:35 PM
Hi,

I have a horizontal css menu that looks great in FF but doesn't align correctly in IE. Is anyone able to help me with a fix for IE browsers?

HTML is


<!-- Begin Navigation -->
<div id="navigation">
<ul class="nav">
<li><a href="default.html">HOME</a></li>
<li><a href="rangemaster/about.html">ABOUT RANGEMASTER</a>
<ul>
<li><a href="http://www.rangemaster.co.uk/index_535.htm" target="_blank">COMPANY HISTORY</a></li>
<li><a href="http://www.rangemaster.co.uk/index_65.htm" target="_blank">PRODUCTS</a></li>
<li><a href="brochure.html">REQUEST BROCHURE</a></li>
<li><a href="http://www.rangemaster.co.uk/ProdLocator.aspx" target="_blank">HOW TO BUY</a></li>
<li><a href="rangemaster/recipes.html">GREAT RECIPE IDEAS</a></li>
</ul>
</li>
<li><a href="falcon/about.html">ABOUT FALCON</a>
<ul>
<li><a href="falcon/history.html" target="_blank">COMPANY HISTORY</a></li>
<li><a href="http://www.falconappliances.com/290.htm" target="_blank">PRODUCTS</a></li>
<li><a href="brochure.html">REQUEST BROCHURE</a></li>
<li><a href="http://www.falconappliances.com/ProdLocator.aspx" target="_blank">HOW TO BUY</a></li>
<li><a href="falcon/recipes.html">GREAT RECIPE IDEAS</a></li>
</ul>
</li>
<li><a href="aga/about.html">ABOUT AGA</a>
<ul>
<li><a href="http://www.aga-web.co.uk/92_243.htm" target="_blank">COMPANY HISTORY</a></li>
<li><a href="http://www.aga-web.co.uk/89.htm" target="_blank">PRODUCTS</a></li>
<li><a href="brochure.html">REQUEST BROCHURE</a></li>
<li><a href="http://www.aga-web.co.uk/90_253.htm" target="_blank">HOW TO BUY</a></li>
<li><a href="aga/recipes.html">GREAT RECIPE IDEAS</a></li>
</ul>
</li>
<li><a href="rayburn/about.html">ABOUT RAYBURN</a>
<ul>
<li><a href="http://www.rayburn-web.co.uk/50.htm" target="_blank">COMPANY HISTORY</a></li>
<li><a href="http://www.rayburn-web.co.uk/44.htm" target="_blank">PRODUCTS</a></li>
<li><a href="brochure.html">REQUEST BROCHURE</a></li>
<li><a href="http://www.rayburn-web.co.uk/48.htm" target="_blank">HOW TO BUY</a></li>
<li><a href="rayburn/recipes.html">GREAT RECIPE IDEAS</a></li>
</ul>
</li>
<li><a href="survey.html">FIND YOUR PERFECT COOKER</a>
<li><a href="gallery.html">PHOTO GALLERY</a>
<li><a href="brochure.html">BROCHURE REQUEST</a>
</ul>
</div>
<!-- End Navigation -->


and CSS is



ul.nav,
.nav ul{
margin: 0;
padding: 0;
list-style-type: none;
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 10px;
height: 25px;
width: 835px;
}

ul.nav{
display: table;
background: url(../_images/menu.gif);
}
ul.nav>li{
display: table-cell;
position: relative;
padding: 6px 6px;
color: #FFFFFF;
text-align:left;
}

ul.nav li>ul{
display: none;
position: absolute;
width: 150px;
margin-left: -10px;
margin-top: 6px;
}

ul.nav li:hover>ul{
display : block;
}


.nav ul li a {
display: block;
padding: 2px 10px;
color: #FFFFFF;
}

.nav a{
text-decoration: none;
color: #FFFFFF;
}

.nav ul li a{
background-color: #000000;
filter:alpha(opacity=80);
opacity: 0.8;
-moz-opacity:0.8;
}

.nav ul li a:hover {
background-color: #B3191E;
}

.nav ul li a:active {
background-color: #B3191E;
}


Many thanks...

Excavator
Mar 24th, 2009, 06:45 PM
Hello boobydooby,
Run that code through the validator once. I think you've left out a ul...

boobydooby
Mar 24th, 2009, 08:48 PM
Hi,

I've just run it through the validator and the only errors it comes up with are regarding the opacity?

Thanks

Excavator
Mar 24th, 2009, 09:12 PM
Hi,

I've just run it through the validator and the only errors it comes up with are regarding the opacity?

Thanks

You're checking in with the CSS validator. There are two validator links in my sig.

mijijava
Mar 25th, 2009, 10:16 AM
i test it and see no problem