Форум

dr_gluk · #1 (**permalink**) 23.01.2012, 12:57

Доброе утро.

Впервые сталкиваюсь с данной проблемкой, есть, казалось бы простая ссылка с бекграундом и текстом внутри http://clip2net.com/s/1vPbB, ссылка вида:
<a class="add_advert" href="blablabla.com">Продать авто</a>
CSS:
a.add_advert {background-position: 0 0; color: #FFFFFF; display: block; font-size: 14px; font-weight: bold; height: 16px; padding: 7px 0 8px 35px; position: absolute; right: 0; text-decoration: none; text-shadow: 0 -1px #497E16; top: 0; width: 109px; z-index: 100;}

По ссылке выше на картинке видно красным две полоски, по сути где-то по миллиметру, которые в опере не хотят кликаться, то есть переход по ссылке не происходит.
*с кнопкой есть небольшая динамика, на ссылку навешено в css :hover (меняется бекграунд) и :active (при нажатии меняется бекграунд + ссылка/кнопка сдвигается на 1 пиксель вправо и вниз), так вот я заметил, что некликабельные области появляются только если есть какие-то действия на :active, а так в обычном состоянии и на :hover ссылка чётко кликается, пробовал дублировать стили, что были при :active ещё и для :focus, но что-то не помогло.

Популярная ли это проблема и есть ли какие-то рекомендации как починить это для оперы.

Заранее благодарен.

---
С уважением, Константин

Seva1986 · #2 (**permalink**) 23.01.2012, 13:33

dr_gluk,

полный код в студию

dr_gluk · #3 (**permalink**) 23.01.2012, 13:53

Спасибо, что откликнулись.

HTML:
<a href="blablabla.com" class="add_advert" onmouseup="this.blur();">Продать авто</a>

CSS:
a.add_advert {position: absolute; width: 109px; display: block; height: 16px; top: 0px; right: 0px; background-position: 0px 0px; text-decoration: none; color: #FFFFFF; font-size: 14px; font-weight: bold; text-shadow: 0 -1px #497E16; padding: 7px 0px 8px 35px; z-index: 100; background-image: url("../../img/all.png"); background-repeat: no-repeat;}

a.add_advert:hover {width: 112px; height: 16px; top: -3px; right: -3px; background-position: -212px 0px; padding: 10px 0px 11px 38px;}

a.add_advert:active {background-position: -212px -37px; width: 112px; height: 16px; top: -2px; right: -4px; padding: 10px 0px 11px 38px;}

Seva1986 · #4 (**permalink**) 23.01.2012, 15:16

dr_gluk,

вообще я имел ввиду вставить код в сообщение в рабочем виде ну ладно и так посмотрю. щас пару минут...

Seva1986 · #5 (**permalink**) 23.01.2012, 15:25

вот ваш код, добавил вместо картинки цвет фона, так как у меня нет вашей картинки везед всё работаете без полосок...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
a.add_advert {
position: absolute; 
width: 109px;
 display: block;
 height: 16px;
 top: 0px; right: 0px; 
 background-position: 0px 0px;
 text-decoration: none; 
 color: #FFFFFF; 
 font-size: 14px;
 font-weight: bold;
 text-shadow: 0 -1px #497E16; 
 padding: 7px 0px 8px 35px;
 z-index: 100;
 background-image: url("../../img/all.png"); 
 background:red;
 background-repeat: no-repeat;
 }
 
 a.add_advert:hover {
 width: 112px; 
 height: 16px;
 top: -3px; 
 right: -3px;
 background-position: -212px 0px;
 padding: 10px 0px 11px 38px;
  background:green;
 }

a.add_advert:active {
background-position: -212px -37px;
background:blue;
 width: 112px;
 height: 16px;
 top: -2px;
 right: -4px;
 padding: 10px 0px 11px 38px;
 }
</style>
</head>
<body>
<a href="" class="add_advert" onmouseup="this.blur();">Продать авто</a>
</body>

</html>

dr_gluk · #6 (**permalink**) 23.01.2012, 16:31

Добавил вложение, html, css и картинка только чисто для кнопки, можно посмотреть в Опере, однопиксельная полоска под текстом не кликабельная получается.
*можно увеличить через ctrl+ ту кнопку для удобства и прокликать прямо под текстом;

Seva1986 · #7 (**permalink**) 23.01.2012, 16:51

dr_gluk,
http://clip2net.com/s/1vRXR

вот такая кнопка, увеличил в опере версия 11,60 всё нормально нету некликабильной полоски.

какая у вас версия оперы?

dr_gluk · #8 (**permalink**) 23.01.2012, 17:01

У меня Опера тоже последняя (11.60), смотрел на нескольких компьютерах, тестировщик тоже проверил, вот эти области на кнопке некликабельные: http://clip2net.com/s/1vS1A (кнопка сдвигается на пиксель вниз и вправо при нажатии левой кнопки мыши, отпускаем, становится на место, но переход по ссылке никак не происходит). Как такое блин выходит в той опере, понятия не имею. Уже и в какой-то span брал внутренний текст и позиционировал абсолютно его внутри "кнопки", пробовал и padding'и другие и line-height, но области чётко не кликаются именно по границам текста справа и снизу и только в опере.

Seva1986 · #9 (**permalink**) 23.01.2012, 17:07

dr_gluk,

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

Seva1986 · #10 (**permalink**) 23.01.2012, 17:14

dr_gluk,

А стоп нашёл это происходит после клика если не двигать мышкой.
щас подумаю...

Форум

Справочник

Discord чат

Курсы javascript