(Решено) Глюки css в линках тизера в Хроме и Сафари

Главные вкладки

Аватар пользователя Гарик Гарик 25 декабря 2012 в 16:25

Странно себя ведут ссылки "Подробнее", "Блог пользователя - ХХХ" и "Добавить комментарий" при наведении. Должен меняться цвет и пропадать подчеркивание, но в Хроме они вообще исчезают (остается только подчеркивание), а в Сафари ничего не происходит. Опера и все версии ИЕ - всё ок.

css:

a:link
{
        color: #003366;
        text-decoration: none;
        border-bottom: 1px solid #C0C7CE;
}
a:hover, a:active, a.active
{
        color:#B50000;
        text-decoration: none;
        border-bottom:none;
}
a:visited
{
        color: #4E5869;
        text-decoration: none;
        border-bottom: 1px solid #C0C7CE;
}
a:visited:hover
{
        color:#B50000;
        text-decoration: none;
        border-bottom:none;
}
a img
{
        border: none;
        display: block;
}

Вживую: http://www.suits.ru

Что-то не так в css? Как исправить? Спасибо.

Комментарии

Аватар пользователя Гарик Гарик 25 декабря 2012 в 17:14

Ну так, по-моему, я именно этим здесь сейчас и пытаюсь заниматься. "Под руководством учителя (в лице сообщества drupal.ru) пытаюсь овладеть знаниями, умениями и навыками".

Можете подсказать где именно ошибка в коде? Если она в нём.

Судя по тому, что остальные ссылки сайта работают как и было задумано - вопрос больше по друпалу, чем по ксс. Нет?

Аватар пользователя arsstud arsstud 25 декабря 2012 в 17:17

Вопрос больше к css.
Если Вы уже выучили псевдоклассы, то почему не доучили последовательность применения?
Плюс, конечно, дофига ненужных в данной ситуации бордеров

Аватар пользователя Гарик Гарик 25 декабря 2012 в 18:20

"arsstud" wrote:
Если Вы уже выучили псевдоклассы, то почему не доучили последовательность применения?

Если Вы об этом:

Quote:
1. «a:hover» должен определяться только после «a:link» и «a:visited»;
2. «a:active» должен определяться после «a:hover».

То изменение последовательности проблему не снимает.
И если css правильный, значит речь идет о влиянии друпала на css. Видимо в этом месте надо как-то по-особенному перекрыть системные стили.

Ну или это глюк Хрома и Сафари (http://forum.htmlbook.ru/index.php?showtopic=32628). Но это вряд ли, т.к. остальные ссылки работают.

Бордеры в данной ситуации — дело вкуса, позволяют изменить цвет подчеркивания, сделать его тоньше и сместить ниже. Скопипащено с http://www.artlebedev.ru.

Аватар пользователя Гарик Гарик 25 декабря 2012 в 18:33

Хотя да, бордеры тут, оказывается, не только дело вкуса. Всё дело почему-то в строке «border-bottom: 1px solid #C0C7CE;» в a:link:

a:link
{
        color: #003366;
        text-decoration: none;
        border-bottom: 1px solid #C0C7CE;
}
Аватар пользователя Гарик Гарик 25 декабря 2012 в 19:09

И что-то сейчас сам не понял, зачем всё много раз продублировано в коде, пляски с бубном по поводу кроссбраузерности были какие-то что ли. Но вкратце получилось так:

a img
{
        border: none;
        display: block;
}
a:link
{
        color: #003366;
        text-decoration: none;
        border-bottom: 1px solid #C0C7CE;
}
a:visited
{
        color: #4E5869;
        border: #C0C7CE;
}
a:hover, a:active, a.active
{
        color:#B50000;
        border-bottom:none;
}

И оно всё равно не работает.

Аватар пользователя Гарик Гарик 26 декабря 2012 в 18:27

Да, дублировать надо было для кроссбраузерности.

Решение по сабжу (upd: не кроссбраузерно, в мобильной опере криво):

.links li a
{
        display:inline-block;height:1.5em;
}

Правда или что-то сбил или еще заодно выявил, что в ИЕ текст немного смещается при наведении на ссылку. Но это уж точно чистый css.

Аватар пользователя Гарик Гарик 26 декабря 2012 в 19:48

Относительно кроссбраузерно (в ИЕ7 слегка приплясывает):

.links ul
{
        font-size:0;
        line-height:0;
        letter-spacing:-1px;
}
.links li a
{
        font-size:normal;
        line-height:normal;
        letter-spacing:normal;
        display:inline-block;
}

Подробности: http://www.xiper.net/collect/html-and-css-tricks/pozitsionirovanie/inlin...

Ну или можно просто покрасить бордер при наведении в цвет фона)