Форум Сайтостроение Веб-строительство

свойства <li>

Walk
На сайте с 31.07.2008
Offline
41
Walk
675

Код списка: 

<UL>

<li class="menutop1"><a href="/gallery/" title="Портфолио" class="menutopp">Портфолио</a></li>

</UL>

стили: 

.menutop1 {

	font-family:tahoma; 

	font-size:12px; 

	font-weight:700; 

	list-style-image:url('/images/lamp1.gif');

	margin-bottom:4px;

}



.menutop1:hover {

	font-family:tahoma; 

	font-size:12px; 

	font-weight:700; 

	list-style-image:url('/images/lamp2.gif');

	margin-bottom:4px;

}

Что получается:

В ИЕ: картинка списка не меняется

В ФФ: картинка при наведении меняется, появляется непонятный отступ между картинкой и ссылкой этак 50px, откуда?

в Опере: картинка меняется, отступ нормальный.

В чем ошибка? Как сделать что бы везде работало нормально?

Показать всю страницу не могу, т.к. заливать очень много, тестирую на локальном с помощью денвера

Anarchist
На сайте с 23.07.2008
Offline
185
Anarchist
#1

а размер картинки какой?

PS еще бы показали класс "menutopp"

Евгения Бахвалова
На сайте с 26.05.2008
Offline
83
Евгения Бахвалова
#2
Walk:
В ИЕ: картинка списка не меняется

Не меняется в ие6 и ниже, потому что они не поддерживают :hover на все элементы страницы. В Вашем случае легче всего поступить так: 


.menutop1 {

	font-family:tahoma; 

	font-size:12px; 

	font-weight:700; 

	background:url('lamp1.gif') no-repeat left center;

	margin-bottom:4px;

	list-style: none;

}

.menutop1 a:hover {

	font-family:tahoma; 

	font-size:12px; 

	font-weight:700; 

	background:url('lamp2.gif') no-repeat left center;

	margin-bottom:4px;

	list-style: none;

}

Только подровнять отступы у юла и ли, чтобы картинки показывались так, как надо.

В ФФ: картинка при наведении меняется, появляется непонятный отступ между картинкой и ссылкой этак 50px, откуда?

Вот этого не должно быть, значит, Ваши картинки лампы первой и второй разные повеличине и по расположению на них элемента, который должен моргать.

Если же принципиальны лист-стайлы, можно заморочиться со скриптами и конструкциями типа этой "{behavior:url("ie6hover.htc")}", но не знаю, насколько оно нужно.

Еня Беарт (http://www.beart.ru) Не ждите чуда - чудите сами.
•1
На сайте с 17.11.2007
Offline
17
•Kar1ss0n•
#3

Попробуйте

[CSS]

a.class1:hover{

display:block;

background:url('pic2.gif') no-repeat left center;

}

[/CSS]

для ссылок :hover в IE6 работает
Спокойствие, только спокойствие ... посмотрим, что можно сделать © xHTML вёрстка (/ru/forum/272377)

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