Google Chrome не хочет отображать текущий класс

[Honcho]

Добрый день всем ! Помогите новичку.

В общем такой вот код -

<ul id="menu">

<li id="home"><span id="current"><a href="index.html"></a></span></li>

<li id="work"><a href="work.html"></a></li>

<li id="contact"><a href="contact.html"></a></li>

<li id="blog"><a href="blog.html"></a></li>

</ul>

и стили -

#home {

background:url(i/home.gif) no-repeat;

height:40px;

width:117px;}

#home a {

display:block;

height:100%;}

#home a:hover {

background:url(i/home-a.gif) no-repeat;}

#home #current a{

background: url(i/home-a.gif) no-repeat;}

соответственно для каждого пункта. В ИЕ , мозе и опере все работает, а гугл хром не реагирует на активный id current , то есть не подсвечивает и при наведении мышой на активный пункт не реагирует на него как на ссылку.

Что бы это значило ?

[swetlana]

не подсвечивает при наведении из-за того, что у селектора #home #current a специфичность выше, чем у #home a:hover.

Не реагирует как на ссылку — возможно, так только кажется, потому что ссылка в нём занимает довольно небольшую часть.

Обратите внимание, что вы ссылке указываете height: 100%, а от чего эта высота высчитывается?

хотя лучше давайте ссылку на сайт. По нему будет лучше понятно.

[Honcho]

Спасибо за ответ , правда не понял по поводу специфичности и отображения - и для hover и для current одинаковая картинка.

Впрочем, после добавления им обоим высоты и ширины, хром перестал выделываться

[swetlana]

Хром не выделывался, а показывал точно то, что ему велено.

По поводу специфичности: лениво объяснять, уж простите Да и в гугле по запросу «специфичность в css» вылезает много толковых статей по теме.

Вот прямо первая в списке: http://www.alexilin.ru/css-specificity/

В целом нормально описано. Но если не нравится, почитайте следующую.

[Honcho]

Извините конечно за тупость, я вторую неделю как в танке поэтому еще лажаю на ровном месте. Про специфичность я читал конечно же, но тут дело кажется не в ней - почему после задания размеров все стало ок ?

Хотя мне кажется я изначально неправильно код написал, можно проще.

[swetlana]

возможно я просто не до конца поняла суть вопроса.

Да скорее всего так и есть. Плюс некоторая невнимательность.

Мне показалось, что ожидается применение правило :hover в любом случае.

А в данном случае при наведении и активный пункт ведь должы иметь одинаковый фон? Тогда всё правильно, и специфичность тут вообще ни при чём.

Только вот этот код:

#home a:hover {
background:url(i/home-a.gif) no-repeat;}

#home #current a{
background: url(i/home-a.gif) no-repeat;}

можно было записать чуть проще:

#home a:hover,
#home #current a{
background: url(i/home-a.gif) no-repeat;}

тогда оно и не сбивало с толку бы

Хотя мне кажется я изначально неправильно код написал, можно проще.

да, этот код можно значительно упростить.