По непонятной причине в браузерах chrome, opera (web-kit) внутри изображения-ссылки образуется рамка белого цвета .Как её убрать?

Question

[Григорий Сергатый]

border: 0; для a img - не работет
Эта рамка отображается только в web-kit браузерах . В firefox её нет.
отображение в chrome

отображение в firefox

Answer 1

[Ленар Фаттахов]

Вы неправильно используете тег <img>. Из-за того, что не указан атрибут src, а картинка накладывается background'ом, и появляется эта рамка. Лучше используйте например тег <i></i>, определив в CSS для него

i {
display: inline-block;
}

Ну и не забывайте указывать размеры)

Comments

[Григорий Сергатый]

Спасибо ! Попробую ...

[Григорий Сергатый]

в этом случае сыпется верстка блоков . Тему верстал не я . Я делал отображение изображения,более похожими на кнопку . Можете посоветовать другой выход ?
Тег - это разве не italic для стилизации текста ?

[Ленар Фаттахов]

Григорий Сергатый: Тег i устарел для стилизации текста, и его часто переопределяют, чтобы использовать для иконок.

[Ленар Фаттахов]

Григорий Сергатый: да, конечно есть другой выход, костыли - это мое призвание) Просто укажите в атрибуте src ссылку на картинку в виде прозрачного пикселя 1x1

[Григорий Сергатый]

Ленар Фаттахов: я уже думал над этим . Спасибо ! Проверю )

[Григорий Сергатый]

Ленар Фаттахов: однопиксельная прозрачная картинка решила вопрос . Спасибо !

Answer 2

[sergski]

а что за repeat:none; ? background-repeat: no-repeat, а лучше background:url(/images/sp_office.jpg) 0 0 no-repeat;

Comments

[Григорий Сергатый]

согласен,что есть лишние и некорректные строки кода.

Answer 3

[Сергей]

Код можно как-нибудь увидеть? Мы же всё таки не телепаты :)

Comments

[Григорий Сергатый]

Здравствуйте !
Код этого блока приложил.

[Сергей]

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

[Григорий Сергатый]

Спасибо !
masterpereezda.by

[Сергей]

У меня все нормально отображается - поправили уже что ли?

Answer 4

[codingal]

Может рамка не у изображения а у блока поверх? "Офисный переезд" прямо на картинке находится или это отдельный блок?

Comments

[Григорий Сергатый]

Здравствуйте!
"Офисный переезд" - это div.office dyenyb которого расположена картинка-ссылка

[codingal]

попробуйте убрать тэг img, а картинку поставить бэкграундом к ссылке

[Григорий Сергатый]

картинка сделана спрайтом с еффектами css ,поэтому данный вариант не подойдет .

[codingal]

Григорий Сергатый: спрайты как раз таки с бэкграундом и используются и эффекты ничего не мешает применить, а спрайты с тэгом img - это что-то новенькое

Answer 5

[Григорий Сергатый]

.top_blocks {
width: 817px;
height: 279px;
background: url(/images/blocks_bg.png);
float: left;}
/*начало*/
.office {
width: 235px;
height: 277px;
float: left;
padding-left: 15px;
margin-right: 30px;
}

.office img{
background:url(/images/sp_office.jpg);
background-position:0px 0px;
width: 230px;
height: 86.5px;
display:block;
repeat:none;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.6);
}
.office img:hover{
background:url(/images/sp_office.jpg);
background-position:0px -86.5px;
width: 230px;
height: 86.5px;
display:block;
repeat:none;
border-radius: 10px;
}
.home {
width: 235px;
height: 277px;
float: left;
padding-left: 15px;
margin-right: 30px;
}
.home img{
background:url(/images/sp_house.jpg);
background-position:0px 0px;
width: 230px;
height: 86.5px;
display:block;
repeat:none;
padding-left: 15px;
margin-right: 30px;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.6);
}
.home img:hover{
background:url(/images/sp_house.jpg);
background-position:0px -86.5px;
width: 230px;
height: 86.5px;
display:block;
repeat:none;
border-radius: 10px;
}
.uslugi {
width: 230px;
height: 277px;
float: left;
padding-left: 15px;
}
.uslugi img{
width: 228px;
height: 86.5px;
margin-left: -10px;
margin-bottom: 16px;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.6);
background:url(/images/sp_uslugi.jpg);
background-position:0px 0px;
display:block;
repeat:none;
}
.uslugi img:hover{
background:url(/images/sp_uslugi.jpg);
background-position:0px -86.5px;
width: 228px;
height: 86.5px;
display:block;
repeat:none;
border-radius: 10px;
}

a img {
border: none;
}

/*окончание вставки*/

Это фрагмент кода css отвечающий за отображение блоков на картинке .
Сайт на Wordpress .
Фрагмент кода html для этого блока :

Ваш офис переезжает на новое место и вы хотите избавить себя от всех этих хлопот связанных с этим процессом? Вы обратились по адресу!Подробнее..
Вы переезжаете в другую квартиру, и вы хотите избавить себя от всех хлопот, связанных с этим процессом? Вы обратились по адресу!Подробнее..
— Сброка-разборка, мелкий ремонт мебели;
— Навес картин, жалюзи, карнизов, полок, зеркал, кухонных шкафов и т.д.Подробнее..

Спасибо!