2010-02-04 3 views
2

Почему Internet Explorer не отображает это .css-меню спрайтов? Может ли кто-то пролить свет на меня, так как я не могу найти ошибки в коде. Html:Меню Css-sprite не работает в

<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 для оберток и ссылки:

.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; 
} 

И пример CSS для: ссылка и: парить:

.home{ 
     left:0; 
    height:50px; 
} 
.home a:hover{ 
    background:url("menusprite.png")-150px 0 no-repeat; 
} 

ответ

2

Ваш сотовыми больше нравится:

.home a:hover{ 
    background:transparent url("menusprite.png") no-repeat scroll -150px 0; 
} 

Существовали две вещи неправильно в вашем CSS:

  1. URL (...) - 150px: Вы должны иметь пространство между атрибутами в свойствах CSS
  2. - 150px 0 no-repeat: фоновое повторение (и фоновая привязка) должно появиться перед фоновым положением в сокращении
+0

Спасибо! Так оно и было. Ну, кажется, ленивый css - проблема :) – Alexander

+0

рад помочь. некоторые браузеры более прощающие, чем другие. Конечно, иногда их терпимость к ошибкам может усложнить отладку. –

Смежные вопросы