Заголовок сообщения: PNG & IE Добавлено: 28 Май 2008, 11:30:23
Народ, за*бался я уже поисками. Есть страница www.globalprofitclub.ru там дофига всяких ПНГ файлов (тени, переходы фона и т.д.). Т.е. не просто логотип с прозрачностью, а много вещей, где ПНГ используется как background. я уже кучу скриптов перепробовал, но ничего не подходит, один глюк сменяется другим от скриптка к скрипту. Есть ли какой-то способ 100% работающий? В FF и Сафари всё нормально отображается
_________________ [*][ЩАСТЬЕ] I am Macintosh user DE'журнал. Быть или не быть? всё обо мне
9 Сообщения: 129 Зарегистрирован: 21.06.06 Откуда: Самара
Добавлено: 28 Май 2008, 11:45:51
Не в тему: а там вообще то нужно PNG в фоне? По-моему можно и без этого обойтись...
В тему: http://www.artlebedev.ru/tools/technogr … ml/framed/ , хотя, в статье сказано, что фоновое, прозрачное PNG не работает режимах strict и transitional для IE версии 6. Но вообще, колдовство с:
Спасибо, попробую разобраться.
По поводу фона: там идёт горизонтальная полоса синяя, которая рассасывается кверху и книзу. Просто необходимо чтобы фон везде был паттерном с этими шарами, а именно там шла эта полоса. Я просто не верстальщик и не придумал другого способа как там это сделать.
просто везде пишут про скрипт pngbehavior, но он какой-то глючный.
_________________ [*][ЩАСТЬЕ] I am Macintosh user DE'журнал. Быть или не быть? всё обо мне
И при загрузке получается забавная фигня: сперва полоски загружаются с прозрачностью, а после полной загрузки страницы опять становятся с серой фигнёй на фоне. Можете по той ссылке глянуть. Почему так?
_________________ [*][ЩАСТЬЕ] I am Macintosh user DE'журнал. Быть или не быть? всё обо мне
всё, оказалось, что если в конце приписать background: none; то случается чудо и в IE всё начинает работать как надо. Но... зато PNG пропали в FireFox. Гррр... чё делать? для каждой картинки определять чё за браузер и решать применять фильтр или нет? Ну если даже так, то как это делать? а то уже и так слишком много додов, для отображения каждой картинки уже три строки кода...
_________________ [*][ЩАСТЬЕ] I am Macintosh user DE'журнал. Быть или не быть? всё обо мне
KaretT, неа, не работает. просто появляется полоска ПНГ в один пиксель по ширине (надо 100%) и всё. Вобщем мы решили написать два отдельных шаблона, один под ИЕ, второй под нормальные браузеры, определять средствами РНР какой именно подгружать и всё.
_________________ [*][ЩАСТЬЕ] I am Macintosh user DE'журнал. Быть или не быть? всё обо мне
209 Сообщения: 6498 Зарегистрирован: 17.08.05 Откуда: Киев. А шо?
Добавлено: 28 Май 2008, 16:45:41
фильтр впихивает картинку в контейнер (на который этот фильтр повешен) или кропает ее по контейнеру. К фону и его свойтсвам этот подход не имеет никакого отношения.
Используя фильтр, можно только эмулировать наложение контента на контейнер с фильтром, напр. через абс.позиционирование и раздачу з-индексов.
karamba, самое интересное, что фильтр с фоном работает. можешь зайти сейчас по ссылке выше, там этим фильтром всё пока под ИЕ заточено. для ФФ другой шаблон будет.
_________________ [*][ЩАСТЬЕ] I am Macintosh user DE'журнал. Быть или не быть? всё обо мне
209 Сообщения: 6498 Зарегистрирован: 17.08.05 Откуда: Киев. А шо?
Добавлено: 28 Май 2008, 22:16:23
Born2be, прочитайте вдумчиво мои откровения. Скейл для фильтра и рипит для фона — вовсе не одно и то же, потому что это совсем разные вещи. Я говорил об «эмуляции», «как-бы фоне». У вас так и есть. Поэтому конструкция
по-большому счету лишена смысла — ФФ фон не показывает, как вы и сказали в последней директиве стиля, и ИЕ не показывает, он показывает фильтр. С таким же успехом можно было оставить просто
Но чудо! Достаточно поставить мааааленькие символы в последних директивах, и все заработает везде (даже в ИЕ 7, ведь вы в нем не проверяли, правда?):
Код:
<td style="background:url(img/orange_d_1.png) left top no-repeat; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/orange_d_1.png, sizingMethod=scale); _background: none">
и не нужно будет писать другой шаблон. А некоторые умельцы выносят описания стилей вообще в отдельные цсс-файлы, причем разные для ИЕ и не-ИЕ и подключают их к хтмл через CC например, используя классы и базовый принцип цсс — наследование, имея на выходе один общий шаблон… Велкам ту зе ворлд оф хакс
PS. Да, и это конечно не мое дело, но от этого, например
209 Сообщения: 6498 Зарегистрирован: 17.08.05 Откуда: Киев. А шо?
Добавлено: 29 Май 2008, 14:48:55
Ответ на вопрос.
Самое простое:
Код:
<img src="empty.png" style="width:…px; height:…px;border:0; background:url(logo.png) left top no-repeat; _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=logo.png, sizingMethod=crop);" />
где empty.png — пустой прозрачный однопиксельный PNG-8 (аналог гифа или просто прозрачный гиф), который растянется указанием ширины и высоты до размеров имиджа logo.png. Сам logo.png — логотип в PNG-24. Минусы — меньше кода, но при попытке напечатать при свойствах печати по-умолчанию или отключенном парсинге цсс лого никто не увидит.
используется два имиджа. Первый, как и в первом случае — контейнер для фильтра, понимаемый только ИЕ версии ниже 7-й, работает директива "display:none; _display:block;". Свойству _display можно присвоить занчения "inline" или "inline-block" в зависимости от макета/окружения/мастерства.
Второй имидж видят все, кроме ИЕ ниже 7-й версии как честный пнг-24, поэтому никаких доп.свойств, кроме размеров, указывать не нужно, работает директива "_display:none;", понимаемая только ИЕ версии ниже 7. Пнг-24 нормально отображается всеми броузерами, включая ИЕ 7.
Кода больше, но он лишен указанных выше недостатков. Для печати есть нюансы, связанные со свойством media цсс-файла, поэтому есть смысл стилевые определения выносить во внешние файлы. Кроме этого, во внешнем файле можно обойтись вовсе без хаков, подключая его через кондишнл-комментс (если речь идет только о разделении свойств для ИЕ и неИЕ).
Уровень доступа: Вы не можете начинать темы. Вы не можете отвечать на сообщения. Вы не можете редактировать свои сообщения. Вы не можете удалять свои сообщения. Вы не можете добавлять вложения.