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;
}
{
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? Как исправить? Спасибо.
Комментарии
учите, друг, css.
Ну так, по-моему, я именно этим здесь сейчас и пытаюсь заниматься. "Под руководством учителя (в лице сообщества drupal.ru) пытаюсь овладеть знаниями, умениями и навыками".
Можете подсказать где именно ошибка в коде? Если она в нём.
Судя по тому, что остальные ссылки сайта работают как и было задумано - вопрос больше по друпалу, чем по ксс. Нет?
Вопрос больше к css.
Если Вы уже выучили псевдоклассы, то почему не доучили последовательность применения?
Плюс, конечно, дофига ненужных в данной ситуации бордеров
Если Вы об этом:
То изменение последовательности проблему не снимает.
И если css правильный, значит речь идет о влиянии друпала на css. Видимо в этом месте надо как-то по-особенному перекрыть системные стили.
Ну или это глюк Хрома и Сафари (http://forum.htmlbook.ru/index.php?showtopic=32628). Но это вряд ли, т.к. остальные ссылки работают.
Бордеры в данной ситуации — дело вкуса, позволяют изменить цвет подчеркивания, сделать его тоньше и сместить ниже. Скопипащено с http://www.artlebedev.ru.
Хотя да, бордеры тут, оказывается, не только дело вкуса. Всё дело почему-то в строке «border-bottom: 1px solid #C0C7CE;» в a:link:
{
color: #003366;
text-decoration: none;
border-bottom: 1px solid #C0C7CE;
}
И что-то сейчас сам не понял, зачем всё много раз продублировано в коде, пляски с бубном по поводу кроссбраузерности были какие-то что ли. Но вкратце получилось так:
{
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;
}
И оно всё равно не работает.
Да, дублировать надо было для кроссбраузерности.
Решение по сабжу (upd: не кроссбраузерно, в мобильной опере криво):
{
display:inline-block;height:1.5em;
}
Правда или что-то сбил или еще заодно выявил, что в ИЕ текст немного смещается при наведении на ссылку. Но это уж точно чистый css.
arsstud, спасибо, что откликнулись)
Относительно кроссбраузерно (в ИЕ7 слегка приплясывает):
{
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...
Ну или можно просто покрасить бордер при наведении в цвет фона)