Верстка. Косяк 6 эксплорера.

12
MerlinMAG
На сайте с 15.10.2006
Offline
43
848

У нас есть ссылка, при наведение на неё, справа (вконце этой ссылки) должен отображаться рисунок.

У нас есть такой код

<div class="block">

<a href="#">Though we may be the last in the world We feel like pioneers We feel like pioneers</a>

</div>

.block { width: 250px; }

.block a:hover { background: url("../images/aaa.gif") right no-repeat; }

Тоесть ссылка, из-за того, что находится в блоке с ограниченой шириной, переходит на другую строку. И IE6 не отображает рисунок при наведении вконце ссылке.

Во Мозиле и Опере всё нормально

Стояли звери - около двери
По ним стреляли - они умирали Бесплатный видеокурс по Drupal (/ru/forum/597414)
timur-kar
На сайте с 29.05.2006
Offline
85
#1
MerlinMAG:
У нас есть ссылка, при наведение на неё, справа (вконце этой ссылки) должен отображаться рисунок.

У нас есть такой код
<div class="block">
<a href="#">Though we may be the last in the world We feel like pioneers We feel like pioneers</a>
</div>

.block { width: 250px; }
.block a:hover { background: url("../images/aaa.gif") right no-repeat; }

Тоесть ссылка, из-за того, что находится в блоке с ограниченой шириной, переходит на другую строку. И IE6 не отображает рисунок при наведении вконце ссылке.
Во Мозиле и Опере всё нормально

если попробовать просто скопипастить Ваш код в чистый файл то все нормально работает. Попробуйте искать в другом месте, возможно у вас там есть еще какой-то прозрачный блок под этой ссылкой - может быть он не дает сделать hover ?

LionSX
На сайте с 09.05.2008
Offline
66
#2
timur-kar:
если попробовать просто скопипастить Ваш код в чистый файл то все нормально работает. Попробуйте искать в другом месте, возможно у вас там есть еще какой-то прозрачный блок под этой ссылкой - может быть он не дает сделать hover ?

Его нельзя просто скопипастить, потому как

<div class="block">

<a href="#">Though we may be the last in the world We feel like pioneers We feel like pioneers</a>

</div> ---- это HTML

.block { width: 250px; }

.block a:hover { background: url("../images/aaa.gif") right no-repeat; } --- Это CSS

Плюс надо картинку с именем aaa.gif создать в папке images

Я проверил - КОСЯК ЕСТЬ, вот только как его решить еще не придумал

Верстка, дизайн, сайты под ключ (http://www.free-lance.ru/users/LionSX)
-L-
На сайте с 05.01.2008
Offline
110
-L-
#3

вывесите на хост, я думаю тогда сразу решим вашу проблему ;)

Есть сайт, паблик Вконтакте или Одноклассниках? Нет денег? Заработай здесь, просто размещая видеоролики в своих сообществах! (http://viboom.com/ru/invite/73)
timur-kar
На сайте с 29.05.2006
Offline
85
#4
LionSX:
Его нельзя просто скопипастить, потому как
<div class="block">
<a href="#">Though we may be the last in the world We feel like pioneers We feel like pioneers</a>
</div> ---- это HTML

.block { width: 250px; }
.block a:hover { background: url("../images/aaa.gif") right no-repeat; } --- Это CSS
Плюс надо картинку с именем aaa.gif создать в папке images
Я проверил - КОСЯК ЕСТЬ, вот только как его решить еще не придумал

ну естественно я разбил HTML и CSS :) не стоит так придираться к словам, имел ввиду что тот-же код в чистом файле. смотрю снова в IE6 - не вижу косяка, может от картинки зависит (в смысле от размеров aaa.gif)

LionSX
На сайте с 09.05.2008
Offline
66
#5

Интересная проблема.

Не поленился залил КОСЯК на сервер:)

http://ukrtele.net/kosjak/index.html

Руслан Исмаилов
На сайте с 30.03.2007
Offline
198
#6

Помоему осталось только задать ссылочке свойство display:block;

timur-kar
На сайте с 29.05.2006
Offline
85
#7
musulman:
Помоему осталось только задать ссылочке свойство display:block;

тогда не получается позиционирование ссылки в конце текста, она уже позиционируется внутри блочного элемента. вообще проблема интересная, я пока решения так и не нашел, правда и задавать background-image с позиционированием для inline-элемента кажется не совсем правильным

LionSX
На сайте с 09.05.2008
Offline
66
#8

Я тоже решение пока не нашел. Уже все перепробывал.

display: block не получается, всеравно картинка не отображается в ИЕ6 в конце строки.

timur-kar, а как еще можно сделать чтоб при наведение появлялась картинка(я просто всегда делаю background-image )?

timur-kar
На сайте с 29.05.2006
Offline
85
#9
LionSX:

timur-kar, а как еще можно сделать чтоб при наведение появлялась картинка(я просто всегда делаю background-image )?

Я бы сделал так


<style>
#link img {display: none}
#link.active img {display: inline}
</style>

<div id='link'><a href='' onMouseOver="this.parentNode.className='active'" onMouseOut="this.parentNode.className=''">link</a><img src='aaa.gif'></div>

понимаю конечно что js в данном случае не очень хорош, но других надежных вариантов не вижу. background-image внутри inline - я себе его плохо представляю как он себя должен вести (поведение в ff мне кажется не очень правильным, по идее картинка на текст должна налагаться), если-бы ie6 поддерживал псевдо-элементы можно было-бы использовать :after, а так - только js вижу как решение

lazio
На сайте с 05.10.2006
Offline
47
#10

ща не работает ссылка(( хотел посмотреть.

кста, для ссылки прописано только одно состояние? или все link,visited,hover,active?

COMFI - Начни Зарабатывать! (http://affiliate.comfi.ru/a2/466735/Program-Overview)
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий