Чтобы при клике открывалось увеличенное изображение или был переход на подробное чтение новости, изображение делают ссылкой.
Но почему-то даже в Internet Explorer 8 (IE селектор img
, окруженный тегом <a>
, визуально проявляется рамкой. Цвет которой определяется цветом ссылки. В Google Chrome такого эффекта в виде рамки нет.
На самом деле, это сильно напрягает. В ИЕ выглядит весьма жутко:
На самом деле убрать рамку вокруг изображений-ссылок очень просто. Не надо специально чего-то мудрить с Internet Explorer, типа условных комментариев, чтобы избавиться от багов, присущих этому чудесному браузеру.
Достаточно просто дописать в CSS к селектору img
свойство border
со значением none
, как показано ниже.
Вариант № 1
a img {
border: none; /* убрать рамку у ссылок-картинок */
}
Вариант № 2
a img {
text-decoration: none; /* скрыть контур у ссылок-картинок */
}
Вот и весь секрет
Опять извечный риторический вопрос: когда же ИЕ перестанет отличаться от всех нормальных браузером своими извращениями?. Ведь речь идет не о шестой и даже не седьмой версии браузера? Это ведь восьмой Интернет Эксплорер, который поддерживает веб-стандарты!
Большое спасибо! Все оказалось просто, как и все гениальное
Да, когда не знаешь решение этой задачи, то может казаться, что она станет большой проблемой :).
Блин! Спасибо ОГРОМНЕЙШЕЕ просто. Ваял проектик небольшой… Посматривал в опере, хроме и фаерфоксе… Про IE забыл совсем… А как открыл… ужаснулся. Но благодаря Вам решение я нашел меньше, чем за 5 минут.
Еще раз спасибо и всяческих успехов!
Спасибо, рад что данный способ оказался решением проблемы.
На самом деле бывают с Лучшим в Мире Браузером проблемы и с Вашим решением. Вернее проблему это не решает. Коль так, не панацеей (это слово в случае с ИЕ применять неграмотно), но одним из варантов является отъем бордера только у картинки (ссылку не трогать), или же указание дополнительного свойства: text-decoration: none; для обоих элементов
Дэн, мне нравится как вы излагаете мысль. Из этого я делаю вывод о том, что вы не обычный человек. Смею предположить, что вы не довольствуетесь ширпотребом, а предпочитаете изысканные вещи.
Даже text-decoration не поленились выделить курсивом. Спасибо.
Кроме того, предложили еще одно решение как избавиться от навязчивого контура у ссылок-картинок.
А Лучший в Мире Браузер — это Гугл Хром?
Спасибо за оценку моего литературного творчества
ЛвМБ — нет, это я про ИЕ (просто надо было, наверное, кавычки поставить — не доглядел)).
Ну, да, в принципе, я сам должен был догадаться.
В шаблоне gardening_theme
надо вырезать вот этот код тогда точно рамка вокруг картинки удалим, иначе ничего не помогло.
.art-article img, img.art-article
{
border: solid 1px #A6A6A6;
margin: 10px;
}
.art-metadata-icons img
{
border: none;
vertical-align: middle;
margin: 2px;
}
.art-article table, table.art-article
{
border-collapse: collapse;
margin: 1px;
width: auto;
}
.art-article table, table.art-article .art-article tr, .art-article th, .art-article td
{
background-color: Transparent;
}
.art-article th, .art-article td
{
padding: 2px;
border: solid 1px #B5B5B5;
vertical-align: top;
text-align: left;
}
.art-article th
{
text-align: center;
vertical-align: middle;
padding: 7px;
}
Спасибо, помогло)