Css-sprite menu not working in ie
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:l开发者_Go百科eft;
     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;
}
Your css should look more like:
.home a:hover{
     background:transparent url("menusprite.png") no-repeat scroll -150px 0;
}
There were two things wrong in your css:
- url(...)-150px: You need to have a space between the attributes in the css properties
- -150px 0 no-repeat: background-repeat (and background-attachment) should come before background-position in the shorthand
 
         加载中,请稍侯......
 加载中,请稍侯......
      
精彩评论