Не кликабельные области ссылки в Opera
Доброе утро.
Впервые сталкиваюсь с данной проблемкой, есть, казалось бы простая ссылка с бекграундом и текстом внутри 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, но что-то не помогло. Популярная ли это проблема и есть ли какие-то рекомендации как починить это для оперы. Заранее благодарен. --- С уважением, Константин |
dr_gluk,
полный код в студию |
Спасибо, что откликнулись.
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;} |
dr_gluk,
вообще я имел ввиду вставить код в сообщение в рабочем виде ну ладно и так посмотрю. щас пару минут... |
вот ваш код, добавил вместо картинки цвет фона, так как у меня нет вашей картинки везед всё работаете без полосок...
<!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>
|
Вложений: 1
Добавил вложение, html, css и картинка только чисто для кнопки, можно посмотреть в Опере, однопиксельная полоска под текстом не кликабельная получается.
*можно увеличить через ctrl+ ту кнопку для удобства и прокликать прямо под текстом; |
dr_gluk,
http://clip2net.com/s/1vRXR вот такая кнопка, увеличил в опере версия 11,60 всё нормально нету некликабильной полоски. какая у вас версия оперы? |
У меня Опера тоже последняя (11.60), смотрел на нескольких компьютерах, тестировщик тоже проверил, вот эти области на кнопке некликабельные: http://clip2net.com/s/1vS1A (кнопка сдвигается на пиксель вниз и вправо при нажатии левой кнопки мыши, отпускаем, становится на место, но переход по ссылке никак не происходит). Как такое блин выходит в той опере, понятия не имею. Уже и в какой-то span брал внутренний текст и позиционировал абсолютно его внутри "кнопки", пробовал и padding'и другие и line-height, но области чётко не кликаются именно по границам текста справа и снизу и только в опере.
|
dr_gluk,
а есть остальной css данного документа? может оттуда чтото лезит.. просто очень старный глюк, некликабельная область внутри ссылки может быть только если чтото из вне позиционируеться поверх этой ссылки... |
dr_gluk,
А стоп нашёл это происходит после клика если не двигать мышкой. щас подумаю... |
Выложить "расширенную" версию не удастся, она "вне офиса" закрыта, но по сути в том куске, что я кинул в архиве проблема ведь также наблюдается. По верху врядли что-то накладывается. Есть на сайте у меня несколько разных внешне "кнопок" в совсем разных местах и там проявилась такая же проблема в опере, я просто показал в архиве приблизительно одну такую кнопку. В принципе, кодингом, года 4+ занимаюсь, не слышал о такой проблеме и не натыкался на такое. Проблема реально прощупывается в активном состоянии :active, если отключаю стили, то всё кликается как следует. Возможно прийдётся в конечном итоге на js пробовать ещё делать "активной" эту кнопку, со стилями какая-то фигня, блин.
|
>А стоп нашёл это происходит после клика если не двигать мышкой.
>щас подумаю... Ага, какой-то fucking fuck :), у нас просто тестировщик достаточно дотошный.. |
Вложений: 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<head>
<style>
a.add_advert {
background-image: url(http://javascript.ru/forum/attachments/xhtml-html-css/1095d1327324958-ne-klikabelnye-oblasti-ssylki-v-opera-123-png);
background-repeat: no-repeat;
}
a.add_advert {
position: absolute;
width: 109px;
display: block;
height: 16px;
top: 200px;
left: 200px;
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;
}
a.add_advert:hover {
width: 112px;
height: 16px;
top: 197px;
left: 197px;
background-position: -212px 0px;
padding: 10px 0px 11px 38px;
}
a.add_advert:active {
background-position: -212px -37px;
width: 112px;
height: 16px;
top: 198px;
left: 198px;
padding: 10px 0px 11px 38px;
}
</style>
</head>
<body>
<a class="add_advert" href="http://www.google.com">Blablabla</a>
</body>
</html>
|
dr_gluk,
я сейчас посмотрел это помойму в опере на всех сайтах происходит если урла нет... |
Цитата:
|
dr_gluk,
стоп, давай ещё раз, при ховере на определённых кусках этойй ссылки всегда некликабельная область, правильно? или она возникает только после того как кликнул и не отпуская мышку немного перетащил? |
Цитата:
Наводим мышкой (сначала есть hover со смено bg) и нажимаем под текстом на кнопке (либо правее чуть от него), срабатывает :active (сдвиг и смена бекграунда), не двигаем курсором, отпускаем кнопку мыши и переход по ссылке не происходит. Думаю, что может и можно конечно двигать курсором, но мол всё равно если в той "однопиксельной" зоне попадать, то переход не произойдёт. Методом исключения я вижe, что трабл именно с :active, если убрать стили для такой ситуации, то fucking областей нету. |
dr_gluk,
всё поймал это... да я такого тоже не встречал или не замечал раньше... но могу предположить что это связанно не с самим :active а со смещением при :active Если с равнить с лисой например то там если кликнуть и потянуть за фон он двигается вместе с текстом, а в опере текст можно отдельно тащить а фон отдельно, видимо с этим и связанно, при клике идёт сдвиг и видимо изза какойто разницы сдвигов возникает проблема... возможно это можно было бы пофиксисить таким событием ondragstart = "return false" но опера его не поддерживает, поэтому тоже не поможет... Самый простой вариант пофиксить это, не двигать кнопку при клике... попробуй сделать эфект сдвига например с помощью удаления и добавления рамок думаю получится, хотя нет, движение тоже тогда будет происходить, раз уж там спрайт то просто перересуй сами заготовки а кнопку не двигай и не изменяй размер её. |
Цитата:
Ладно, это какая-то странная передряга, мне уже неудобно, что я тебя отвлекаю на такую задачу в течении дня. Попробую "помозговать" ещё сам, чтоли какое-то время. |
dr_gluk,
у текста можно тень двигать. кстати также у самой кнопки можно сделать тень и двиагать... главное движение кнопки убрать...чтобы её левый верхний угол был на одном месте... Но это как вариант... не уверен что поможет но баг действительно отвратительный... |
| Часовой пояс GMT +3, время: 03:17. |