0 Пользователей и 1 Гость просматривают эту тему.
  • 30 Ответов
  • 41814 Просмотров
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
Данный вопрос появляется регулярно. Решений данной проблемы предостаточно, все они отличаются друг от друга, но все они выполняют свою функцию - исправляют отображение картинок формата png в браузере Internet Explorer 6.
Причиной появления серого фона вместо прозрачного является отсутствие обработчика альфа-канала в самом браузере, что приводит к невозможности кроссбраузерного использования фомата png. Лично я крайне редко прибегаю к использованию png картинок по двум причинам:
1) "вес" картинок данного формата как правило достаточно сильно превосходит jpeg (если используются картинки с разрешением выше 20х20 пикселей без прозрачности), что в итоге будет влиять на скорость загрузки сайта. Лучше попытаться "склеить" две jpeg картинки, чем сразу прибегать к использованию прозрачности.
2) необходимость использования дополнительных скриптов. Если на сайте используется 1-3 png картинки, то скорость обработки и конвертации их в обработчик альфа-канала не займет много времени визуального отображения, но если же картинок более 10, то это сильно "подвесит" браузер. Заметить это можно в поочередном исчезании серого фона у картинок, а не моментальном.

С увеличением потребности использования данного формата microsoft ввел CSS св-во filter. Выглядит данный CSS следующим образом

Код
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../image.png', sizingMethod='scale');
, где sizingMethod определяет поведение браузера по отношению к картинке, таким образом значения
  • scale будет масштабировать картинку по ширине и высоте элемента, в котором она располагается.
  • crop - обрезает картинку по области элемента
  • image - сохраняет первоначальную пропорцию
Так же допустимо путое значение sizingMethod

Многие другие решения базируются именно на данном свойстве filter, сводя работу верстальщика не к созданию отдельного файла стилей и расписыванию чего-то вроде
Код
div#header { background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../image.png', sizingMethod='image'); }
,а к автоматическому нахождению png картинок через DOM дерево браузера и их подмену на данное свойство. Плюсом подобной замены можно выделить то, что будут обрабатываться и те картинки, которые не предусмотрены изначально в макете, допустим пользовательские аватары. Но подобные действия по отношению к DOM, как я писал выше, приводят к "торможению" браузера. В отдельных случаях результатом может оказаться и "зависание".

Пожалуй, самое распростаненое решение - pngbehavior.htc
Код
<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>

var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";

if (supported) fixImage();

function propertyChanged() {
   if (!supported) return;

   var pName = event.propertyName;
   if (pName != "src") return;
   // if not set to blank
   if ( ! new RegExp(blankSrc).test(src))
      fixImage();
};

function fixImage() {
   // get src
   var src = element.src;

   // check for real change
   if (src == realSrc) {
      element.src = blankSrc;
      return;
   }

   if ( ! new RegExp(blankSrc).test(src)) {
      // backup old src
      realSrc = src;
   }

   // test for png
   if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
      // set blank image
      element.src = blankSrc;
      // set filter
      element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
                                     src + "',sizingMethod='scale')";
   }
   else {
      // remove filter
      element.runtimeStyle.filter = "";
   }
}

</script>
</public:component>

в CSS шаблона необходимо добавить (следите за путями к файлу)
Код
img, div { behavior: url("../js/pngbehavior.htc"); }

Следующее решение тоже является одним из основных - iepngfix.htc
Код
<public:component>
<public:attach event="onpropertychange" onevent="iePNGFix(0)" />

<script type="text/javascript">

// IE5.5+ PNG Alpha Fix v1.0
// (c) 2004-2008 Angus Turnbull http://www.twinhelix.com

// This is licensed under the GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/


// This must be a path to a blank image, relative to the HTML document(s).
// In production use I suggest '/images/blank.gif' or similar. That's all!
if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';



function filt(s, b)
{
 var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
 var sM = (currentStyle.backgroundRepeat == 'no-repeat')? 'crop' : 'scale';
 s = (s || '').replace(/\(/g, '%28').replace(/\)/g, '%29');

 if (s && !(/IMG|INPUT/.test(nodeName) && !b) &&
  currentStyle.width == 'auto' && currentStyle.height == 'auto')
 {
  style.width = offsetWidth + 'px';
  style.height = clientHeight + 'px';
  if (currentStyle.display == 'inline') style.display = 'inline-block';
 }

 if (filters[f])
 {
  filters[f].enabled = s ? true : false;
  if (s) with (filters[f]) { src = s }
 }
 else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="' + sM + '")';
}

function iePNGFix(init)
{
 if (!/MSIE (5\.5|6)/.test(navigator.userAgent) || typeof filters == 'unknown') return;
 var evt = init ? { propertyName: 'src,background' } : event;
 var isSrc = /src/.test(evt.propertyName);
 var isBg = /background/.test(evt.propertyName);
 var isClass = !init &&
  ((this.className != this._png_class) && (this.className || this._png_class));
 if (!(isSrc || isBg || isClass)) return;
 this._png_class = this.className;
 var blank = blankImg.match(/([^\/]+)$/)[1];

 // Required for Whatever:hover support - erase any set BG if className changes.
 if (isClass && ((style.backgroundImage.indexOf('url(') == -1) ||
     (style.backgroundImage.indexOf(blank) > -1)))
 {
  setTimeout(function() { this.style.backgroundImage = '' }, 0);
  return;
 }

 if (isSrc && this.src && /IMG|INPUT/.test(nodeName))
 {
  if ((/\.png/i).test(src))
  {
   filt(src, 1);
   src = blankImg;
  }
  else if (src.indexOf(blank) == -1) filt();
 }

 var bgSrc = currentStyle.backgroundImage || style.backgroundImage;
 if ((bgSrc + this.src).indexOf(blank) == -1)
 {
  var bgPNG = bgSrc.match(/^url[("']+(.*\.png[^\)"']*)[\)"']+[^\)]*$/i);

  if (bgPNG)
  {
   style.backgroundImage = 'url("' + blankImg + '")';
   filt(bgPNG[1], 0);
   // Unclickable elements inside PNG backgrounds.
   var tags = ['a', 'input', 'select', 'textarea', 'iframe', 'object'],
    t = tags.length, tFix = [];
   while (t--)
   {
    var elms = all.tags(tags[t]), e = elms.length;
    while (e--) tFix.push(elms[e]);
   }
   var t = tFix.length;
   if (t && (/relative|absolute/i).test(currentStyle.position))
    alert('IEPNGFix: Children of positioned element are unclickable:\n\n<' +
     nodeName + (id && ' id=' + id) + '>');
    while (t--)
     if (!(/relative|absolute/i).test(tFix[t].currentStyle.position))
      tFix[t].style.position = 'relative';
  }
  else filt();
 }
}

iePNGFix(1);

</script>
</public:component>

В целом это тот же pngbehavior.htc, только с улучшеными инициализацией и методом обработки изображения и применением к нему дополнительных стилей для улучшения кроссбраузерности

в CSS шаблона его необходимо подключить так (следите за путями к файлу)
Код
img, div { behavior: url("../js/iepngfix.htc"); }
Данный скрипт так же работает и для input. Если же требуется задать обработку всех элементов, то досточно сделать так
Код
* { behavior: url("iepngfix.htc"); }

Менее известный способ, использующий css expression
Код
* HTML img, * HTML .png {
azimuth: expression( 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 = "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); }
Честно говоря не рекомендую его использовать, а просто привел для "справки"

Альтернатива iepngfix.htc - supersleight.js
Код
var supersleight	= function() {

var root = false;
var applyPositioning = true;

// Path to a transparent GIF image
var shim = 'blank.gif';

// RegExp to match above GIF image name
var shim_pattern = /blank\.gif$/i;



var fnLoadPngs = function() {
if (root) {
root = document.getElementById(root);
}else{
root = document;
}
for (var i = root.all.length - 1, obj = null; (obj = root.all[i]); i--) {
// background pngs
if (obj.currentStyle.backgroundImage.match(/\.png/i)!== null) {
bg_fnFixPng(obj);
}
// image elements
if (obj.tagName=='IMG' && obj.src.match(/\.png$/i)!== null){
el_fnFixPng(obj);
}
// apply position to 'active' elements
if (applyPositioning && (obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position === ''){
obj.style.position = 'relative';
}
}
};

var bg_fnFixPng = function(obj) {
var mode = 'scale';
var bg = obj.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
if (obj.currentStyle.backgroundRepeat == 'no-repeat') {
mode = 'crop';
}
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')";
obj.style.backgroundImage = 'url('+shim+')';
};

var el_fnFixPng = function(img) {
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
img.src = shim;
};

var addLoadEvent = function(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
};
}
};

return {
init: function() {
addLoadEvent(fnLoadPngs);
},

limitTo: function(el) {
root = el;
},

run: function() {
fnLoadPngs();
}
};
}();

// limit to part of the page ... pass an ID to limitTo:
// supersleight.limitTo('header');

supersleight.init();

Подключается к шаблону так
Код
<!--[if IE 6]>
<script src="src="<?php echo $mosConfig_live_site; ?>/templates/YOUREMPLATENAME/js/supersleight.js">
<![endif]-->

Обратите внимание, что данные решения требуют наличия прозрачного однопиксельного gif (blank.gif)!

Далее рассмотрим более "продвинутые" способы

- JqueryPngFix, который описан в этом топике

- ie7-js, который вообщем правит не только отображение картинок .png, а еще такие вещи как :hover, :fixed и т.д
Правит только картинки с именами вида -trans.png, хотя найдя в конце кода IE7_PNG_SUFFIX:"-trans.png" и стерев -trans.png скрипт будет обрабатывать все картинки

Недавно появившийся DD_belatedPNG (скачать), отличием которого является отличная поддержка background-position и background-repeat, не требует прозрачного однопиксельного gif, появилась возможность без использования :hover-хака использовать смену картинок при :hover на элемент и самое главное то, что данный способ не использует AlphaImageLoader

Подключается к шаблону следующим образом (следите за путями к файлу)
Код
<!--[if IE 6]>
<script src="<?php echo $mosConfig_live_site; ?>/templates/YOUREMPLATENAME/js/DD_belatedPNG.js"></script>
<script>
    DD_belatedPNG.fix('.png_bg');
    /* DD_belatedPNG.fix('*'); * -  приведет к фиксу всех тегов */
    /* .png_bg должен быть заменен на любой другой селектор, который Вам нужно обработать. Указание в качесте селектора * приведет к фиксу всех тегов, но использовать не рекомендуется, так как значительно увеличивается время рендеринга страницы. Тег body не может быть использован в качестве обрабатываемого селектора */
</script>
<![endif]-->

Данная статья собрана из всего, что обсуждалось или проскакивало на форуме, она является результирующим итогом на 2008 год и все вопросы в разделе "шаблоны и дизайн", связанные с  проблемой отображения png картинок будут удаляться.

[вложение удалено Администратором]
« Последнее редактирование: 09.10.2009, 10:19:20 от poizon »
*

Longmen

  • Захожу иногда
  • 65
  • 1 / 0
По вашему совету попробовал использовать DD_belatedPNG - неработает.
*

Longmen

  • Захожу иногда
  • 65
  • 1 / 0
Вставлял в шаблон вот так
Код
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
JPlugin::loadLanguage( 'tpl_SG1' );
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<!--[if IE 6]>
<script src="<?php echo $mosConfig_live_site; ?>/templates/siteground-j15-14/js/DD_belatedPNG.js"></script>
<script>
    DD_belatedPNG.fix('.png_bg');
    /* .png_bg может быть заменен на любой другой селектор. body не может быть использован в качестве обрабатываемого селектора */
</script>
<![endif]-->
</head>
<! начало шаблона -->
<body id="page_bg">

Больше ничего нигде не мнял. Может ещё что-то надо сделать?
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
для начала у Вас Joomla 1.5, а у меня код приведен для 1.0, т.е
Код
<script src="<?php echo $mosConfig_live_site; ?>/templates/siteground-j15-14/js/DD_belatedPNG.js"></script>
нужно поменять на
Код
<script src="/templates/siteground-j15-14/js/DD_belatedPNG.js"></script>
далее
Код
<script>
    DD_belatedPNG.fix('.png_bg');
    /* .png_bg может быть заменен на любой другой селектор. body не может быть использован в качестве обрабатываемого селектора */
</script>
.png_bg менять нужно под свою верстку... если понятия не имеете, что нужно там написать, поставьте там *
Код
<script>
    DD_belatedPNG.fix('*');
</script>
« Последнее редактирование: 06.10.2009, 13:25:38 от poizon »
*

Longmen

  • Захожу иногда
  • 65
  • 1 / 0
Всё поменял. Вы правы, понятия не имею что писать заместо .png_bg (кстати, ткните пальцем где можно почитать). Поэтому поставил *. В результате ie вылетает с ошибкой.
*

Longmen

  • Захожу иногда
  • 65
  • 1 / 0
Верстка у меня - множествено-вложенные div.
*

Helios

  • Захожу иногда
  • 380
  • 27 / 1
  • Аэтошозадеталь?
http://www.dillerdesign.com/experiment/DD_belatedPNG/ на сайте подробно описанно как использовать.
лично я пользую так (для Joomla 1.0)

Код
<!--[if lte IE 7]>
<script type="text/javascript" src="'.$mosConfig_live_site.'/components/com_c/ajax/pngfix.min.js"></script>
<script type="text/javascript">
//<![CDATA[
DD_belatedPNG.fix("img, a");
//]]>
</script>
<![endif]-->
Киноархив 3.0 для Joomla 3 http://joomlaforum.ru/index.php/topic,46279.msg1463058.html#msg1463058

/* Have a nice day! */
*

Longmen

  • Захожу иногда
  • 65
  • 1 / 0
Всё это понятно - методы работают. Но я не могу понять какой селектор мне использовать.
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
если у вас есть пнгшки в меню, допустим оно такое
Код
<ul id="mainmenu">
 <li><a href="#" title="">...</a></li>
 <li><a href="#" title="">...</a></li>
 <li><a href="#l" title="">...</a></li>
</ul>
то нужно сделать так
Код
DD_belatedPNG.fix("#mainmenu a");

если * в качестве селектора выдает ошибку, то скачайте новую версию скрипта.
*

Longmen

  • Захожу иногда
  • 65
  • 1 / 0
С новой версие заработало и стали отображать все картинки. Спасибо.
*

terr

  • Давно я тут
  • 824
  • 14 / 6
  • Ученик html-я
Подключается к шаблону следующим образом (следите за путями к файлу)

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

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
в index.php используемого шаблона
*

Remi Etien

  • Осваиваюсь на форуме
  • 43
  • 0 / 0
Добрый день. Также пытаюсь подружить IE с png при помощи DD_belatedPNG. Все замечательно работает во всех перечисленных в скрипке селекторах. НО. Один не поддается дрессировки. Тот, который описывает верхнее горизонтальное меню. При включении его в скрипт, меню становится столбиком и IE виснет. Причем, все тоже самое происходит даже, если фоном выбран не прозрачный png. Вот сам селектор:

Цитировать
ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited {

display: block;
margin-left: 10px;
margin-right: 10px;
padding:5px 25px;
padding-bottom:5px;
text-decoration: none;
color: #c5dcff;
font-weight:bold;
font-size: 12px;
border:1px solid #839cc2;
background:url(../images/777.png)

P.S. Joomla 1.5.12. Огромное спасибо за помощь.
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
ну для начала по этим стилям меню и будет столбиком, так как нет float или display:inline.
Так же при замене картинки на vml контейнер становится как relative, что в целом тоже нужно принять к сведению.
*

Remi Etien

  • Осваиваюсь на форуме
  • 43
  • 0 / 0
ну для начала по этим стилям меню и будет столбиком, так как нет float или display:inline.
Так же при замене картинки на vml контейнер становится как relative, что в целом тоже нужно принять к сведению.

В настройках модуля данного меню значится "legacy (плоский список)", что, насколько я понимаю и описывает горизонтальный вывод меню. Заметил вот какую особенность: если убрать в основном файле CSS свойство display у данного селектора, то в IE6 все png отображаются, как надо. Но это несколько рушит общий дизайн, так как без св-ва display: block не работают другие. Отступы, рамки и т.д. Вопрос: можно ли в одном index.php объединить одновременно условия использования и DD_belatedPNG.fix и отдельного CSS под IE6 с убранным "display: block"? Пусть в IE6 геометрия меню будет немного другая, не столь важно. Как правильно записать данную комбинацию? Запись вида...

Цитировать
<!--[if IE 6]>
<script src="templates/bodysolid/jc/DD_belatedPNG.js"></script>
<script>
    DD_belatedPNG.fix('#container #header,#column2_container_full, div.module_menu div div div, div.module_menu h3, div.module div div div, div.module_text div div div, #frame_bg, ul#mainlevel-nav li a:link');
</script>
<![endif]-->

<!--[if IE 6]>
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template_ie6.css" type="text/css"/>
<![endif]-->

...выполняет только первое условие. Тоже самое, если записать так:

Цитировать
<!--[if IE 6]>
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template_ie6.css" type="text/css"/>
<script src="templates/bodysolid/jc/DD_belatedPNG.js"></script>
<script>
    DD_belatedPNG.fix('#container #header,#column2_container_full, div.module_menu div div div, div.module_menu h3, div.module div div div, div.module_text div div div, #frame_bg, ul#mainlevel-nav li a:link');
</script>
<![endif]-->

Спасибо.
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
Мне кажется, что Вы попросту не понимаете как делается горизонтальное меню...
покажите сгенерированный HTML код меню.
*

Remi Etien

  • Осваиваюсь на форуме
  • 43
  • 0 / 0
Мне кажется, что Вы попросту не понимаете как делается горизонтальное меню...
покажите сгенерированный HTML код меню.

Пусть и так. Не столь важно, если честно. Был бы Вам чрезмерно благодарен, если Вы мне подскажите, как правильно записать оба условия при использовании IE6.

Цитировать
<div id="top-menu">       
           <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                    <td>
                        <ul id="mainlevel-nav"><li><a href="/my/index.php/about-joomla" class="mainlevel-nav" >Маша</a></li><li><a href="/my/index.php/features" class="mainlevel-nav" >Вася</a></li><li><a href="/my/index.php/news" class="mainlevel-nav" >Петя</a></li><li><a href="/my/index.php/the-community" class="mainlevel-nav" >Ксюша</a></li><li><a href="/my/index.php/2009-10-29-11-55-36" class="mainlevel-nav" >Хрюша</a></li></ul>       
                    </td>
               </tr>
            </table>
       </div>                         
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
для того, чтобы меню было горизонтальным, нужно добавить float:left
*

Remi Etien

  • Осваиваюсь на форуме
  • 43
  • 0 / 0
для того, чтобы меню было горизонтальным, нужно добавить float:left

Уважаемый Poizon, у меня меню и так горизонатльное. Я пытаюсь спросить Вас о том, можно ли в одном index.php записать сразу два условия для IE6: DD_belatedPNG и сторонний css-файл. И правильную орфографию кода, если данная запись возможна. Повторюсь, я пробовал записи вида:

Цитировать
<!--[if IE 6]>
<script src="templates/bodysolid/jc/DD_belatedPNG.js"></script>
<script>
    DD_belatedPNG.fix('#container #header,#column2_container_full, div.module_menu div div div, div.module_menu h3, div.module div div div, div.module_text div div div, #frame_bg, ul#mainlevel-nav li a:link');
</script>
<![endif]-->

<!--[if IE 6]>
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template_ie6.css" type="text/css"/>
<![endif]-->

и

Цитировать
<!--[if IE 6]>
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template_ie6.css" type="text/css"/>
<script src="templates/bodysolid/jc/DD_belatedPNG.js"></script>
<script>
    DD_belatedPNG.fix('#container #header,#column2_container_full, div.module_menu div div div, div.module_menu h3, div.module div div div, div.module_text div div div, #frame_bg, ul#mainlevel-nav li a:link');
</script>
<![endif]-->

В обоих случаях выполняется только одно условие. Заранее благодарен за помощь.

Спасибо!
Последний способ работает просто супер!
Отмечен один лишь баг - сдвиг на пиксель изображения
Вот смотрите - http://siluet.in.ua/ (модуль статей справа, левая нижняя граница)

Что касается:
Уважаемый Poizon, у меня меню и так горизонатльное. Я пытаюсь спросить Вас о том, можно ли в одном index.php записать сразу два условия для IE6: DD_belatedPNG и сторонний css-файл. И правильную орфографию кода, если данная запись возможна. Повторюсь, я пробовал записи вида:
В обоих случаях выполняется только одно условие. Заранее благодарен за помощь.
Попробуйте расписать в нескольких строках, вида:
Код
<script>
DD_belatedPNG.fix('div');
DD_belatedPNG.fix('li');
DD_belatedPNG.fix('img');
</script>
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
Кстати, да, есть такое порой, что происходит сдвиг на пиксель. Почему так получается я не могу ответить, но "лечится" оно принудительным заданием параметра display:inline; для ие6 т.е или _display:inline; или * HTML display:inline;

Бывает и такое, что и это не прокатывает, тогда просто сместите блок на 1 пиксель через возможный вариант типа
_margin-top:-1px; или _top:-1px; в зависимости от типа блока
*

Шмайсер

  • Давно я тут
  • 633
  • 29 / 2
А может быть такое что ИЕ7 не отображает картинку вообще? она в пнг на прозрачном фоне рисунок. В ФФ все отображается, в ие7 нет.. Просто я сечас на распутье, дело в нечитаемости прозрачного фона эксплоером ( и тогда использовать скрипты) или я чтото в коде намутил и ИЕ просто НЕ ВИДИТ картинку вообще?
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
а какой условный комментарий у Вас выставлен для IE? lte7, lt7 или lt6?
Кстати, для предотвращения сдвига в 6ом попробуйте прогнать пнгшку через pngout или аналог.
*

bulls

  • Захожу иногда
  • 134
  • 3 / 0
poizon У меня вопрос,сделал всё как описанно выше! Прозрачность решенна,спасибо. Но вот теперь вылетает ошибка в ie-6

A Runtime Error has ocurrend.
Do you wish to Debug?
Line;13
Error; Invalid argument.

Где строчка 13, это начало всего скрипта, там вобше всё в  одну строку
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
Вы правда думаете, что я могу угадать какой скрипт Вы выбрали?
*

Властитель Неизвестности

  • Осваиваюсь на форуме
  • 31
  • 0 / 1
poizon, Вам по ходу делать нечего? Зачем вам вообще отображение в IE6 чего-то? Им уже никто не пользуется, а если и пользуется, то точно не тот, кто действительно останется на сайте, т.к. либо это ламак, либо вообще не понятно кто!

И ещё вы не правы. Наверное оптимизировать изображения не умеете если говорите, что jpeg лучше png - туфта. Учитесь оптимизировать. В основном jpeg хуже и больше.
*

Шмайсер

  • Давно я тут
  • 633
  • 29 / 2
Цитировать
Им уже никто не пользуется
Вы наверное на рублевке живете, и считаете что за МКАДом тундра и ходят белые медведи?? Ослом 6 пользуется куча народу, и хрен кого переубедишь установить мозилу или оперу - привыкли к ослу.
*

it-master

  • Новичок
  • 3
  • 1 / 0
ослом пользуются в основном люди которые работаю в муниципальных образованиях (школах, часто вузах и др.) где сисадмины ослы не могу обновить или поставить нормальный браузер...

а по поводу DD_belatedPNG.fix лучшее что я видел, нашёл ещё один глюк (мож у мну руки не оч. ровные)... map'ы перестают работать для картинок кто нить сталкивался? Решали?

К сожалению, ни один из приведённых способов не излечил связку фильтров AlphaImageLoader + Alpha.
Чихать даже на 6-ку, в 8-ке тоже не работает.
То есть если я применяю фильтр Alpha, то теряется alpha-канал png.
не работает даже следующая конструкция:

<div style="filter:alpha(opacity=50);">
  <div id=2 style="background: url('any.png'); width:600; height:400;">Text</div>
</div>

Максимум, что получается - это побочная обработка текста внутри #2.

Буду очень признаетелен за помощь.
*

yeti

  • Новичок
  • 16
  • 1 / 0
Спасибо, большое! Мне помог DD_belatedPNG
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться