Why doesn't Internet Explorer render this .css sprite menu i made? Could someone shed some light for me as i am unable to find any error in the code. Html:
<div class="menu">
<ul class="nav">
<li class="home"><a href="#"></a></li>
<li class="element2"><a href="#"></a></li>
<li class="element3"><a href="#"></a></li>
<li class="element4"><a href="#"></a></li>
<li class="element5"><a href="#"></a></li>
<li class="element6"><a href="#"></a></li>
<li class="element7"><a href="#"></a></li>
</ul>
</div>
Css for wrappers and links:
.menu{
height:350px;
margin:0;
padding:0;
float:left;
width:150px;
}
/*Menu*/
.nav{
background:url("menusprite.png");
height:350px;
padding:0;
margin:0;
}
.nav li{
list-style:none;
padding:0;
position:relative;
top:0;
}
.nav li, .nav a{
height:50px;
display:block;
}
And example css for a:link and :hover:
.home{
left:0;
height:50px;
}
.home a:hover{
background:url("menusprite.png")-150px 0 no-repeat;
}