Jump to content
  • 0

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

Mary_RND

Asked by Mary_RND,

 Share

Question

Mary_RND Explorer

Mary_RND

Posted
Posted

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

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

e2f6290b0523.jpg

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;
 		         	}

Link to comment
Share on other sites

27 answers to this question

Recommended Posts

  • 0
Mary_RND Explorer

Mary_RND

Posted
  • Author
Posted (edited)
  TonKhaO said:
ну ессно в ИЕ 6 нет поддержки png прозрачности! ищи в гугле iepngfix

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

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

Edited by Mary_RND
Link to comment
Share on other sites
  • 0
Mary_RND Explorer

Mary_RND

Posted
  • Author
Posted (edited)
  psywalker said:
Да, пнг в ие6 так просто смещаться не будет. Попробуй пнг-фикс

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

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

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

Edited by Mary_RND
Link to comment
Share on other sites
  • 0
Mary_RND Explorer

Mary_RND

Posted
  • Author
Posted
  rus said:
есть два выхода:

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

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

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

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)

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

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

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

Edited by mishka2
Link to comment
Share on other sites
  • 0
Mary_RND Explorer

Mary_RND

Posted
  • Author
Posted (edited)
  Great Rash said:
Mary_RND, во-первых, попытайтесь использовать вот это решение.

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

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

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

черт

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

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

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

черт

посмотрела в ИЕ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 by Mary_RND
Link to comment
Share on other sites
  • 0
DjTarik Explorer

DjTarik

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
Mary_RND Explorer

Mary_RND

Posted
  • Author
Posted
  DjTarik said:
Есть ещё один способ.

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

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

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

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

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

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

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

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

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

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

))

  psywalker said:

не работает :)

Link to comment
Share on other sites
  • 0
DjTarik Explorer

DjTarik

Posted
Posted

Ну значит:

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

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

Link to comment
Share on other sites
  • 0
Mary_RND Explorer

Mary_RND

Posted
  • Author
Posted (edited)
  DjTarik said:
Ну значит:

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

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

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

  Quote
Теперь в ИЕ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>

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

5601a1b109e2.png

Edited by Mary_RND
Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)

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

<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 by mishka2
Link to comment
Share on other sites
  • 0
Mary_RND Explorer

Mary_RND

Posted
  • Author
Posted
  mishka2 said:
Так как у вас линки блочные с заданной шириной высотой, то делайте код

<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

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)

поправка

a:hover span{

height:70px;

padding:70px 0 0;

margin:-70px 0 0;

}

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

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

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

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

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

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

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

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

Edited by mishka2
Link to comment
Share on other sites
  • 0
Mary_RND Explorer

Mary_RND

Posted
  • Author
Posted
  mishka2 said:
Ну тогда удачи вам с джс, и клипами.

><

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

?

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

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

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

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

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

Или в аську

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

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

Или в аську

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

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

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)

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

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

Edited by mishka2
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept