Разное отображение макетов в IE и Firefox? Пример внутри, в чем ошибка?

D

173

Dmitr

11 октября 2008, 23:16

1894

Сабж:

Опера (правильно отображается)

IE (не верно)

Что надо исправлять и чем вызвано такое отображение в IE ?

jpg opera.jpg

jpg ie.jpg

174

Varkolak

11 октября 2008, 23:31

#1

Читайте про прозрачность png файлов в IE 6

Varkolak добавил 12.10.2008 в 03:32

точнее про ее отсутсвие без хаков!

html/css/js верстка и разработка сайтов на hostcms (хостцмс) - skype: varkolak1, тел: 89675012935, e-mail: anton.yurzanov@gmail.com

D

173

Dmitr

11 октября 2008, 23:34

#2

Varkolak, а какие хаки необходимы, чтобы всё работало как должно?

46

Flash.UA

12 октября 2008, 01:02

#3

Dmitr:
Varkolak, а какие хаки необходимы, чтобы всё работало как должно?

Например такие, с использованием expression в css:


* html #your-id {

	background-image: expression('none'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/i/your-image.png', sizingMethod='crop');

}

Но, у вас такие картинки, что для них и обычная GIF подойдет, зачем тогда использовать PNG?

V

97

valdissom

12 октября 2008, 01:03

#4

Вот наверно один из простых способов (не знаю про валидность):

Нужно обхитрить IE так чтобы он не показывал картинку img а другие браузеры показывали бы. Это делается просто, вот так: в тег img ставим style=”filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);” теперь IE не будет показывать картинку (в нашем случае это прозрачный PNG), а все остальные браузеры не поймут данный стилевой трюк, и просто корректно покажут картинку. Таким образом, мы заставили одним и тем же тегом, IE не показывать картинку, а всем остальных браузерам показывать картинку.



Но как же нам всё же показать через IE 6 корректно прозрачную PNG картинку? Для этого мы как пример обрамим, наш тег img ещё и div, а затем добавим в него следующий стиль: style=”filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’)”. Этот стиль заставит IE 6 корректно вывести прозрачный PNG, а другие браузеры опять не поймут его и не будет наложений одной картинки, которую они и так уже вывели, ну другую.



Вот так всё просто решается!

D

173

Dmitr

12 октября 2008, 08:10

#5

Flash.UA, подскажите, плз, что подставлять в местах

#your-id

и

/i/your-image.png

84

kil

12 октября 2008, 15:31

#6

Можно еще проще. Один раз прописываешь - и больше трогать ничего не надо.


<html>

 <head>

  ...

  <!--[if lt IE 7]>

   <![if gte IE 5.5]>

    <script type="text/javascript" src="fixpng.js"></script>

    <link rel="stylesheet" href="style_ie.css" type="text/css"/>

   <![endif]>

  <![endif]-->

  ...

 </head>

 <body>

  ...

 </body>

</html>

Сами файлы можешь скачать здесь например: fixpng.js style_ie.css

174

Varkolak

12 октября 2008, 16:06

#7

не все так просто, на вашем бы месте, я отказался от прозрачных png и юзал бы gif, т.к. хаки не позволяют полноценно решить эту проблему!

P.S. хотя встречал в сети хак, но сейчас не вспомню, где он, вро де бы как все роблемы решалЮ но и то не факт!

84

kil

12 октября 2008, 19:27

#8

Varkolak:
не все так просто, на вашем бы месте, я отказался от прозрачных png и юзал бы gif, т.к. хаки не позволяют полноценно решить эту проблему!
P.S. хотя встречал в сети хак, но сейчас не вспомню, где он, вро де бы как все роблемы решалЮ но и то не факт!

Почему? Что конкретно неполноценно?

По крайней мере в приведенном мной примере все работает без каких-либо проблем!

D

173

Dmitr

13 октября 2008, 12:01

#9

kil,

Вот, что получилось...

Хотя, в месте - element.src = "/blank.gif"; видимо необходимо что-то подставить? :)

jpg stalo.jpg

185

Anarchist

13 октября 2008, 12:09

#10

Dmitr, просто замените свои png на gif таким образом, чтобы на месте прозрачности стоял цвет бэкграунда.

Дольше будет париться с этими скриптами, чем переделать пару картинок и пару буковок в коде.

У вас очень простые картинки. Именно поэтому нет смысла изобретать велосипед.

Ну а если есть желание вникнуть в суть вопроса, погуглите на тему "альфа-прозрачность"

Open AI тестирует память для ChatGPT

Зачем быть уникальным в мире, где все можно скопировать