Code is validated (3 Warnings) but still does not work in IE8 but works in Firefox?

[andrewb]

Hi everyone,

I was hoping someone could help. This code works fine in Firefox but in IE8, it does not display the drop down menus.

These are the warnings I get by the validator

7 .menu Redefinition of font-size
11 .menu ul You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
38 .menu li ul You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.

Any ideas? I've merged both the CSS code and the HTML code together.

cheers,
Andrew



<style>


.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("images/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;

}
.menu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;

}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}



</style>

<div class="menu">
<ul>
<li><a href="index.php" target="_self" >i-Home</a>
</li>
<li><a href="games.php" target="_self" >Games</a>
<ul>
<li><a href="xbox360reviews.php" target="_self">XBox 360</a></li>
<li><a href="ps3reviews.php" target="_self">PlayStation 3</a></li>
<li><a href="pcreviews.php" target="_self">PC</a></li>
<li><a href="wiireviews.php" target="_self">Wii</a></li>
</ul>
</li>
<li><a href="movies.php" target="_self" >Movies</a>
<ul>
<li><a href="blurayreviews.php" target="_self">Blu-ray</a></li>
<li><a href="dvdreviews.php" target="_self">DVD</a></li>
<li><a href="imaxreviews.php" target="_self">iMax</a></li>
<li><a href="moviereviews.php" target="_self">Movies</a></li>
</ul>
</li>
<li><a href="software.php" target="_self" >Software</a>
</li>
<li><a href="hardware.php" target="_self" >Hardware</a>
<ul>
<li><a href="" target="_self">PC</a></li>
<li><a href="" target="_self">Apple</a></li>
<li><a href="" target="_self">Console</a></li>
</ul>
</li>
<li><a href="coolreviews.php" target="_self" >Comics</a>
</li>
<li><a href="newreviews.php" target="_self" >New Reviews</a>
<ul>
<li><a href="games" target="_self">Games</a></li>
<li><a href="" target="_self">Movies</a></li>
<li><a href="" target="_self">Hardware</a></li>
<li><a href="" target="_self">Comics</a></li>
</ul>
</li>
<li><a href="competitions.php" target="_self" >Competitions</a>
</li>
<li><a href="forums.php" target="_self" >Community</a>
</li>
<li><a href="news.php" target="_self" >News</a>
</li>
<li><a href="test.php" target="_self" >Test</a>
</li>
</ul>
</div>

[traq]

IE has limited support for the :hover psuedoclass. You can try something like whatever:hover (http://www.xs4all.nl/~peterned/csshover.html), or simply use javascript to power the dropdowns.

good luck

[andrewb]

Thanks Adrian, worked perfectly :)

[traq]

no problem. you should edit your first post and add the "Resolved" prefix to your thread title.