Css-спрайт меню не работает, т.е. - PullRequest
Новая
       19

Css-спрайт меню не работает, т.е.

2 голосов
/ 04 февраля 2010

Почему Internet Explorer не отображает это меню спрайтов .css, которое я создал?Может ли кто-то пролить свет на меня, так как я не могу найти ошибки в коде. 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 для упаковщиков и ссылок: 

    .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 для: link и:зависание: 

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

1 Ответ

2 голосов
/ 04 февраля 2010

Ваш CSS должен выглядеть так: 

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

В вашем CSS было две вещи неправильно:

  1. url (...) - 150px : Вам необходимо иметь пробел между атрибутами в свойствах css
  2. -150px 0 no-repeat : background-repeat (и background-attachment) должны предшествовать background-position встенография
...