hover у ссылки сменой фона в ИЕ6

Mary_RND · April 12, 2010

В ИЕ6 у ссылки фоном есть картинка, которая вдобавок png еще, при наведении должен менятся.

В везде нормально, а вот ИЕ6 выдает:

html

<ul id="menu_two">
  <li><a href="#" class="iePNG">Схема проезда</a></li>
    <li><a href="#" class="iePNG">Скачать прайс-лист</a></li>
       <li><a href="#" class="iePNG">Оформить заказ</a></li>
</ul>

css


#index #menu_two   {
			list-style: none;
			margin: -350px 0 0px 0px;
			padding: 0px 0 0 0px;
			position: relative;
			display: block;
			float: right;
			z-index: 7;
			text-align: left;
			}

#index ul#menu_two li {
				font-family: Arial;
				margin: 0px 0 0px 0;
				color: #fff;
				font-size: 18px;
				font-weight: normal;
				}

#index ul#menu_two li a {
				color: #fff;
				text-decoration: none;
				background: url(../i/link_smena_2.png) no-repeat left top;
				display: block;
				padding: 37px 0 0 10px;
				height: 33px;
				width: 315px;
		         	}

#index ul#menu_two li a:hover {
				text-decoration: underline;
				background-position: -325px 0px;
				height: 33px;
				width: 315px;
 		         	}

TonKhaO · April 12, 2010

ну ессно в ИЕ 6 нет поддержки png прозрачности! ищи в гугле iepngfix

Edited April 12, 2010 by TonKhaO

Mary_RND · April 12, 2010

ну ессно в ИЕ 6 нет поддержки png прозрачности! ищи в гугле iepngfix

Вопрос вообще то не в прозрачности, по скрину видно, что она уже есть "

а в том что при наведении картинка должна сместится, везде она при наведение смешается, а в ИЕ она вот так выглядит как на картинке

Edited April 12, 2010 by Mary_RND

psywalker · April 12, 2010

Да, пнг в ие6 так просто смещаться не будет. Попробуй пнг-фикс

Mary_RND · April 12, 2010

Да, пнг в ие6 так просто смещаться не будет. Попробуй пнг-фикс

http://webhelper.org.ua/archives/40 я этим способом подключала png

какой еще фикс использовать?

http://html-css.info/2009/09/png-fix-ie6/ и этот работает так же

Edited April 12, 2010 by Mary_RND

rus · April 12, 2010

есть два выхода:

1) наплевать на ИЕ-6 (что уже неоднократно мусолилось).

2) не использовать png (если вам так важно отображение в этом недобраузере).

Mary_RND · April 12, 2010

есть два выхода:
1) наплевать на ИЕ-6 (что уже неоднократно мусолилось).
2) не использовать png (если вам так важно отображение в этом недобраузере).

проблема в том что это меню должно наезжать при 1024, как раз таки на ту злополучную флешку, и соответсвенно фон под ними от флеш должен быть виден

Great Rash · April 12, 2010

Mary_RND, во-первых, попытайтесь использовать вот это решение.

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

mishka · April 12, 2010

Фтопку всякие решения с .js и .htc.

Использовать самый простой и древний а главное безотказный!

filter:progid:dximagetransform.microsoft.alphaimageloader(src='', sizingMethod='');

Edited April 12, 2010 by mishka2

Mary_RND · April 12, 2010

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

Второй метод зароботал, только в нем походу нельзя делать текст получается?

Второй метод зароботал, только в нем походу нельзя делать текст получается?

черт

посмотрела в ИЕ7

в ИЕ6 меню просто не отображает даже текста

Второй метод зароботал, только в нем походу нельзя делать текст получается?
черт
посмотрела в ИЕ7
в ИЕ6 меню просто не отображает даже текста

Так понятно что было, надо было путь не ../i/, а ./i/ писать

Теперь в ИЕ6 прикольно так при наведении рябит

И при том первая нормально при наведении, вторая пустая, третья намного ниже фон появляется

	#index #menu_two   {
			position:relative;
			float: right;
			list-style:none;
			height:210px;
			width: 325px;
			margin: -350px 0 0px 0;
			padding: 0 0 0 0;
			z-index: 7;
			text-align: left;
			}

	#index ul#menu_two li{
				font-family: Arial;

				color: #fff;
				font-size: 18px;
				font-weight: normal;
				}

	#index ul#menu_two li a {
		position:absolute;
		top:0;
		right:0;
		width:325px;
		height:70px;
		text-align: left;
		color:#fff;
		background:url(../i/link_smena.png) no-repeat 0 0;
		text-decoration:none;
		text-indent:-1983em;
		overflow:hidden;
		cursor:pointer;
		}

	#index ul#menu_two li#n2 a{
		top:65px;
		}

	#index ul#menu_two li#n3 a{
		top:130px;
		}
/*Смещение фона для нормальных броузеров*/
	#index ul#menu_two li a:hover{
		text-decoration: underline;
		background-position:0 -65px;
			}

/* Симуляция смещения фона для ИЕ */
	*html #index ul#menu_two li a{
	background:none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./i/link_smena.png", sizingMethod="crop");
	clip:rect(0px 325px 65px 0px);
	height:130px;
	}

	*html #index ul#menu_two li a:hover{
	clip:rect(65px 325px 130px 0px);
	top:-65px;
	}

<!-- menu two -->
<ul id="menu_two">
  <li id="n1"><a href="#">Схема проезда</a></li>
    <li id="n2"><a href="#">Скачать прайс-лист</a></li>
       <li id="n3"><a href="#">Оформить заказ</a></li>
</ul>

Edited April 12, 2010 by Mary_RND

Great Rash · April 12, 2010

Покажите ваш код или дайте ссылку на страницу.

psywalker · April 12, 2010

http://itblogger.ru/programming/png-fix-fo...hki-v-ie-6.html

DjTarik · April 12, 2010

Есть ещё один способ.

Можно заюзать простой полупрозрачный пнг24, применив к нему альфа фильтр. (чтобы поверх него работали ссылки, им нужен "position: relative;"). Но смещение будем делать не через "background-position: ;"? а при помощи позиционирования и свойства 'clip: ();". Тогда не нужны и скрипты. Я так всё время делаю... Никаких проблем... Даже со сложными спрайтами...

p.S. Просто как вариант)))

Mary_RND · April 12, 2010

Есть ещё один способ.
Можно заюзать простой полупрозрачный пнг24, применив к нему альфа фильтр. (чтобы поверх него работали ссылки, им нужен "position: relative;"). Но смещение будем делать не через "background-position: ;"? а при помощи позиционирования и свойства 'clip: ();". Тогда не нужны и скрипты. Я так всё время делаю... Никаких проблем... Даже со сложными спрайтами...
p.S. Просто как вариант)))

да так и сделала ж

но теперь в ИЕ6 прикольно так при наведении рябит

И при том первая нормально при наведении, вторая пустая, третья намного ниже фон появляется

Покажите ваш код или дайте ссылку на страницу.

полностью всей страницы?

Фтопку всякие решения с .js и .htc.
Использовать самый простой и древний а главное безотказный!
filter:progid:dximagetransform.microsoft.alphaimageloader(src='', sizingMethod='');

))

http://itblogger.ru/programming/png-fix-fo...hki-v-ie-6.html

не работает

DjTarik · April 12, 2010

Ну значит:

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

Лучше кусок кода... А ещё лучше - ссылку...

Mary_RND · April 12, 2010

Ну значит:
Лучше кусок кода... А ещё лучше - ссылку...

Уже постила чуть раньше, но вот еще раз

А сайта еще нет просто...

Теперь в ИЕ6 прикольно так при наведении рябит

И при том первая нормально при наведении, вторая пустая, третья намного ниже фон появляется

	#index #menu_two   {
			position:relative;
			float: right;
			list-style:none;
			height:210px;
			width: 325px;
			margin: -350px 0 0px 0;
			padding: 0 0 0 0;
			z-index: 7;
			text-align: left;
			}

	#index ul#menu_two li{
				font-family: Arial;

				color: #fff;
				font-size: 18px;
				font-weight: normal;
				}

	#index ul#menu_two li a {
		position:absolute;
		top:0;
		right:0;
		width:325px;
		height:70px;
		text-align: left;
		color:#fff;
		background:url(../i/link_smena.png) no-repeat 0 0;
		text-decoration:none;
		text-indent:-1983em;
		overflow:hidden;
		cursor:pointer;
		}

	#index ul#menu_two li#n2 a{
		top:65px;
		}

	#index ul#menu_two li#n3 a{
		top:130px;
		}
/*Смещение фона для нормальных броузеров*/
	#index ul#menu_two li a:hover{
		text-decoration: underline;
		background-position:0 -65px;
			}

/* Симуляция смещения фона для ИЕ */
	*html #index ul#menu_two li a{
	background:none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./i/link_smena.png", sizingMethod="crop");
	clip:rect(0px 325px 65px 0px);
	height:130px;
	}

	*html #index ul#menu_two li a:hover{
	clip:rect(65px 325px 130px 0px);
	top:-65px;
	}

<!-- menu two -->
<ul id="menu_two">
  <li id="n1"><a href="#">Схема проезда</a></li>
    <li id="n2"><a href="#">Скачать прайс-лист</a></li>
       <li id="n3"><a href="#">Оформить заказ</a></li>
</ul>

картика которая подставляется

Edited April 12, 2010 by Mary_RND

mishka · April 12, 2010

Так как у вас линки блочные с заданной шириной высотой, то делайте код

<li><a href="#"><span>Оформить заказ</span></a></li>

на спан цепляете бг, для ие6 - фильтр, все джс фтопку!

a{
width:325px;
height:70px;
color:#fff;
overflow:hidden;
cursor:pointer;
}
a span{
display:block;
ovrflow:hidden;
height:140px;/* - в 2 раза больше линки(по бг)*/
background:url(../i/link_smena.png) no-repeat 0 0;
}

a:hover{border:0;}/* для ие6 нужно чтонить для a:hover иначе не отработает a:hover span */
a:hover span{
height:70px;
padding:70px 0 0;
margin:-70px 0 0;
}

для ие6

a span{
	background: url(../i/transparent.gif);
	filter:progid:dximagetransform.microsoft.alphaimageloader(src='i/link_smena.png', sizingMethod='crop');
}

transparent.gif - такая себе гифовая картинка 1х1 пиксель

Edited April 12, 2010 by mishka2

Mary_RND · April 12, 2010

Так как у вас линки блочные с заданной шириной высотой, то делайте код
<li><a href="#"><span>Оформить заказ</span></a></li>
на спан цепляете бг, для ие6 - фильтр, все джс фтопку!
a{
width:325px;
height:70px;
color:#fff;
overflow:hidden;
cursor:pointer;
}
a span{
display:block;
ovrflow:hidden;
height:140px;/* - в 2 раза больше линки(по бг)*/
background:url(../i/link_smena.png) no-repeat 0 0;
}

a:hover{border:0;}/* для ие6 нужно чтонить для a:hover иначе не отработает a:hover span */
a:hover span{
height:70px;
padding:70px 0 0;
margin:-70px;
}
для ие6
a span{
	background: url(../i/transparent.gif);
	filter:progid:dximagetransform.microsoft.alphaimageloader(src='i/link_smena.png', sizingMethod='crop');
}
transparent.gif - такая себе гифовая картинка 1х1 пиксель

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

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

первый нормально, второго при наведении нет, третий скачет вниз\

как этот глюк убрать в ИЕ6

mishka · April 12, 2010

поправка

a:hover span{

height:70px;

padding:70px 0 0;

margin:-70px 0 0;

}

как то не очень выглядит

Ну тогда удачи вам с джс, и клипами.

и вдобавок пукты все равно скачут

назначте hasLayout лишкам

да и картинку оно не обрезает,а делает всю

Проверьте соответствие размеров.

да и картинку оно не обрезает,а делает всю

Ну конечно - у вас высота линок 33пикса, я пример сделал для 70пиксов. Подгоните под свои размеры

Edited April 12, 2010 by mishka2

Mary_RND · April 12, 2010

Ну тогда удачи вам с джс, и клипами.

><

назначте hasLayout лишкам

?

Читала но не знаю как тут его применить..

Проверьте соответствие размеров.
Ну конечно - у вас высота линок 33пикса, я пример сделал для 70пиксов. Подгоните под свои размеры

я и подгоняла под свои

просто у первого линка из-за двойной картинки она полностью видна

И все таки как убрать эти дерганья в ИЕ6? ( вроде все уже упростила до css и html

mishka · April 12, 2010

Залей куданить на файлообменник

будем на ТЫ

Edited April 12, 2010 by mishka2

psywalker · April 12, 2010

Залей куданить на файлообменник
будем на ТЫ

Как на "Ты", вы же ещё не выпивали даже вместе?

mishka · April 12, 2010

Как на "Ты", вы же ещё не выпивали даже вместе?

Так мы и с тобой не выпивали...

Кстати, Макс, покажика как ты делаешь пнг ховер для ие6 спрайтом

Залей куданить на файлообменник

Или в аську

psywalker · April 12, 2010

Так мы и с тобой не выпивали...

Ну ещё не вечер, как говорится

Кстати, Макс, покажика как ты делаешь пнг ховер для ие6 спрайтом
Или в аську

Если честно, уже не делал 1000 лет) Вот щас сам для вас на сераваке искал способ с ДД-фиксом. Не могу найти. Как будут успехи, покажу обязательно.

Воо, поссмотрите этот вариант http://www.psywalker.ru/Forum/Menu/7/main.html

mishka · April 12, 2010

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

Так что я решил всегда делать старым проверенным способом с помощью фильтров.

Edited April 12, 2010 by mishka2

psywalker · April 12, 2010

просто этот джс DD_belatedPNG он если сделать примерчик маленький, то вроде как работает. А если так сказать в боевых условиях то он такие баги непонятные выдает.. то ховер не работает, то ховер отработает но потом не исчезает... короче лаги еще те
Так что я решил всегда делать старым проверенным способом с помощью фильтров.

Да, есть такое дело, сам мучился не раз

Sign In

hover у ссылки сменой фона в ИЕ6

Question

Link to comment

Share on other sites

27 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information