Опять про прозрачный PNG в IE6

[Vlad]

Тема добавления рисунка в формате PNG-24 с прозрачными участками в IE6 всячески обсосана и раскрыта. Однако мало где написано, что все приведенные способы не работают для повторяющегося фона. Насколько понял, проанализировав различные статьи, для IE6 вообще нет адекватного решения. Имеется только паллиатив (половинчатое решение говоря бытовым языком) и сводится к трем вариантам.

1. Фон убирается вообще. Это делается либо через скрипты, либо добавлением атрибута _background: none к элементу с фоном.

2. Вместо PNG используем GIF или другой формат, но уже без 8-битной прозрачности. Замена не равнозначная, но что уж есть.

background: url(shadow.png) repeat-x;

_background: url(shadow.gif) repeat-x;

3. В Фотошопе при сохранении через Save for Web включаем пункт "Transparency Dither". Выглядит это ущербно, но что поделать. Подключение к стилям как в п. 2.

У кого есть комментарии?

[Justnewone]

Перечитал весть топик, но не понял, есть ли решение для такой ситуации:

.ulex {list-style-image: url(file.png);}

<ul class="ulex">
  <li>First</li>
  <li>Second</li>
</ul>

есть, расположить картинку бекграундом. JS не умеет лазить в файл CSS.

[psywalker]

А подпись ты чё такую маленькую сделал? Нам же не видно адреса

[Игорь Ермаков]

А я у Макса с одного сайта скрипт скопипастил, доволен безумно, использую везде.

Спасибо.

[psywalker]

А я у Макса с одного сайта скрипт скопипастил, доволен безумно, использую везде.

Спасибо.

А ну ка поделись, воришка

[Игорь Ермаков]

Да вот он парой постов выше: http://forum.htmlbook.ru/index.php?s=&...st&p=117963

[Nird]

всю жизнь юзаю http://www.twinhelix.com/css/iepngfix/ никогда не возникало проблем

[klierik]

http://www.twinhelix.com/css/iepngfix/demo/ - использует AlphaImageLoader, "замораживает" страницу и грузит память.

Все же решение основанное на VML все же элегантнее будет

[loftystyles]

уже год как использую для пнг скрипт на jQuery - http://jquery.andreaseberhard.de/pngFix/index.html

удобен тем, что не надо ничего прописівать в стилях и тому подобное - подрузилjQuery, потом этот скрипт и все работает

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

[Jumper]

Добрый вечер.

Подскажите пожалуйста реально рабочий пример для png и осла (ie6). Только прошу не надо мне js мне нужeн чистый css. Делал с помощью jquery но это ходячий глюк.

Спасибо.

[klierik]

есть:

	/* png fix */

	.png {behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "img/transparent.gif"):(this.origBg = this.origBg? this.origBg:this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),	this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));}

или

div {background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/header-stock-cap.png");}

[sc@r@bey]

Есть более удачный png fix'ер, чем IEPNGFix v2 от twinhelix.com

DD_belatedPNG

http://www.dillerdesign.com/experiment/DD_belatedPNG/

— background-image.

— background-position и background-repeat.

— Не нужен прозрачный gif для <img/>.

— Не используется AlphaImageLoader (используется VML) = нет проблем с z-index.

— Нормально работает element.style в JavaScript.

— Нормально работает :hover.

— ~7Кб сжатого кода.

— Очень прост в использовании.

— Валидный CSS, так как не требуется использование behavior

Пример использования:

<!--[if IE 6]><script type="text/javascript" src="dd_belatedpng_0.0.8a.js"></script>
<script type="text/javascript">
	//применение к классам (можно писать и ID и незвание элемента) png фикса. 
	DD_belatedPNG.fix('.divan div, img, #lustra, .window');
	//Такая запись применит pngfix к элементу div в классе .divan, всем изображениям в теге <img>,
	//элементам с ID = 'lustra', и элементам с class="window"
</script>
<![endif]-->

Скачать:

DD_belatedPNG_0.0.8a.js

DD_belatedPNG_0.0.8a-min.js

Хотя с таким темпом популярности, скоро на все эти fix's можно будет забить.

LiveInternet browsers statisctic

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

<!--[if IE 6]><script type="text/javascript" src="script/pngfix.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('body, #header, #head, #line, #footer, #left-bg, #right-bg, #f');
</script>
<![endif]-->

подключаю css <link rel="stylesheet" type="text/css" href="css/style.css" />

[LunatiK]

Путь к скрипту правильный ? сам код какой(html, css) ?

[sc@r@bey]

путь правильный

код тут http://forum.htmlbook.ru/index.php?showtopic=19691

[sc@r@bey]

разобрался, поставил XP с родным IE6 и все заработало, до этого была Vista с эмулятором IETester потому и не работало

[dr_lines]

Обнаружил интересный феномен.

Ни в одном IE не отображается этот PNG:

Глубина цвета в нем 8bit прозрачных элементов нет. Все остальные браузеры отображают это изображение без проблем.

Если его пересохранить в каком-нибудь редакторе, то все отображается нормально.

У меня довольно часто при верстке получаются такие png.

Может кто вкурсе в чем проблема?

[LunatiK]

видать фаил подбитый или с малыми ошибками, Fireworks CS4 отказался его открывать, скорее всего также прихотлив как и ИЕ

[klierik]

2dr_lines, в чем изначально сохраяете ПНГ?

[dr_lines]

2dr_lines, в чем изначально сохраяете ПНГ?

CorelPhotoPaint X4

видать фаил подбитый или с малыми ошибками, Fireworks CS4 отказался его открывать, скорее всего также прихотлив как и ИЕ

Ну, тогда проблема ясна, corel сглючивает иногда при сохранении.

Edited March 14, 2010 by dr_lines

[sprite757]

У меня такой вопросик, что добавить или что исправить, не отображается в експлорере мини-папирус (маленький листочек для новостей, хочу использовать как подложку для всяких обьявлений и тд), я делал див в диве у каждого свой бекгроунд, подскажите плиз. В опере, фаерфоксе, сафари отображает нормально, а в эксплорере, у меня 8 версия, отображает просто текст

Так в експлорере:

Так в остальных:

—

Страничка: http://thekba.hmarka.net/csstemplate/papyrus/index.htm

Архив: http://thekba.hmarka.net/csstemplate/papyrus.zip

[dr_lines]

В CSS проблема:

background: url( "pic/menu.png")no-repeat;

пробел не поставили после скобки

background: url( "pic/menu.png") no-repeat;

Edited June 13, 2010 by dr_lines

[sprite757]

В CSS проблема:

background: url( "pic/menu.png")no-repeat;

пробел не поставили после скобки

background: url( "pic/menu.png") no-repeat;

Спасибо, а я голову ломал , вроде такая мелочь...