PNG в два слоя и ie6

[Flight]

Есть полупрозрачный png фон у блока. Поверх него ложим ещё один такой-же.

#right_menu {float:right; width:117px; background-image:url(images/light.png); _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/light.png',sizingMethod='scale'); height:262px}

#right_menu a {display:block; color:#FFFFFF; background-image:url(images/light.png); _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/light.png',sizingMethod='scale')}

Во всех браузерах работает, но в ie6 нет. Как это дело обойти? Даже если сделать в #right_menu a другой png (в два раза полупрозрачней), то он не отображается.

Edited March 27, 2009 by Flight

[Flight]

Ещё актуально. Неужели никто не сталкивался с наложением полупрозрачных png в ie6?

[homm]

выложи пример проблемной страницы в сеть.

[Flight]

http://nz-studio.com/flight/vmeste/ - вот пример странички, там на синем фоне справа менюшка. гляньте на неё в ie6 и в браузерах.

вот исходники http://nz-studio.com/flight/vmeste/vmeste.rar

[homm]

#right_menu a:hover, #right_menu a.selected {width: 100%; …

Для всяких фильтров указание координат, которые браузер не может вычислить самостоятельно, обязательно.

[Flight]

Ничего не понял, так что нужно править?

[homm]

А я чё, не написал, что нужно править?

[Flight]

Супер, всё работает. Отличное решение.

[LS200]

Вместе с другом написали статью на эту тему.

Доброго времени суток!

Сегодня бы хотелось поговорить о способах достижения прозрачности PNG в увы, но часто используемом на данный момент браузере Internet Explorer 6.0.

Такие браузеры как Mozilla, Opera уже давно поддерживают прозрачность PNG, это знают многие,а у Internet Explorer 6.0 существует проблема с правильной загрузкой альфа-канала в PNG-файлах. Эту проблему можно решить несколькими путями.

* Первый путь. Используем заместо PNG GIF-файлы

* Используем фильтры

Многие выбирают первый путь - он и проще и быстрее скажите Вы. Но что он реально нам дает??! 256 цветов при таком же размере файла. Вы скажите анимация.. Но анимация это не такой веский повод ими пользоваться. GIF - это уже устаревшая технология, это пережитки.

Что касается второго пути и того, как нам можно избежать проблем с совместимостью браузеров - фильтры ведь поддерживаются только на Internet Explorer-е.

Предлагается такое решение. Делается CSS (в файле), подразумевающий что браузер поддерживает прозрачность PNG.

Дальше делается еще один файл - iefix.css к примеру, где мы переписываем те классы (идетификаторы), где требуется прозрачность.

Пример ниже - думаю поймете сами.

default-1.css

body

{

font: 100% Verdana, Arial, Helvetica, sans-serif;

margin: 0;

padding: 0;

text-align: center;

color: #000000;

}

.navigbar

{

position:absolute;

background-image:url(/style/login_panel.jpg);

background-repeat:repeat-x;

text-align:right;

top:173px;

left:0px;

width:100%;

height:66px;

z-index:10;

}

.navigbar div

{

padding-top:15px;

padding-right:5px;

margin:0px;

}

.twoColElsLtHdr #container {

/*width: 46em; */

width: 100%;

margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */

text-align: left; /* this overrides the text-align: center on the body element. */

}

.twoColElsLtHdr #topshader

{

background-image:url(/style/header.png);

background-position:right;

background-repeat:no-repeat;

z-index:9;

width:100%;

position:absolute;

top:0px;

float:right;

}

.twoColElsLtHdr #logo

{

background-image:url(/style/logo.jpg);

background-repeat:no-repeat;

float:left;

width:502px;

height:177px;

z-index:1;

}

#rpanel

{

padding-top:20px;

float:right;

padding-right:5px;

display:block;

clear:both;

}

#spanel

{

padding-top:0px;

padding-right:5px;

display:block;

clear:both;

}

#rpanel div.icon

{

margin: 3px;

}

#rpanel div.icon a

{

display: block;

float: left;

height: 97px !important;

height: 100px;

width: 70px !important;

width: 70px;

vertical-align: middle;

text-decoration : none;

border: 1px solid #DDD;

padding: 0px 5px 1px 5px;

}

#rpanel div.icon a:link

{

color : #808080;

}

#rpanel div.icon a:hover

{

color : #333;

background-color: #f1e8e6;

border: 1px solid #c24733;

padding: 0px 4px 0px 6px;

}

#rpanel div.icon a:active

{

color : #808080;

}

#rpanel div.icon a:visited

{

color : #808080;

}

#rpanel div.icon img

{

margin-top: 10px;

}

#rpanel div.icon span

{

display: block;

padding-top: 3px;

text-align:center;

font-family:Geneva, Arial, Helvetica, sans-serif;

font-size:12px;

}

.twoColElsLtHdr #right-tool

{

position:absolute;

top:0px;

right:0px;

padding-right:5px;

z-index:99;

}

.twoColElsLtHdr #right-tool-bg

{

float:right;

position:absolute;

top:0px;

right:0px;

z-index:8;

background-image:url(/style/right_tool.png);

background-repeat:repeat-y;

width:214px;

height:177px;

}

.twoColElsLtHdr #header {

background:url(/style/top_background.jpg);

background-repeat:repeat-x;

height:220px;

padding: 0px;

}

.twoColElsLtHdr #sidebar1 {

position:relative;

left:0px;

top:0px;

float: left;

width: 200px; /* since this element is floated, a width must be given */

background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */

padding: 15px 0;

background-color: #F8FEE2;

}

.twoColElsLtHdr #sidebar1 h3,

.twoColElsLtHdr #sidebar1 p

{

margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */

margin-right: 10px;

}

.twoColElsLtHdr #mainContent {

position:relative;

left:0px;

margin: 0 1em 0 13em; /* the right margin can be given in ems or pixels. It creates the space down the right side of the page. */

}

.twoColElsLtHdr #newscontent {

float:right;

display:block;

width:100px;

padding-left:5px;

}

.twoColElsLtHdr #footer {

padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */

background:url(/style/bottom_background.jpg);

background-repeat:repeat-x;

height:100px;

clear:both;

}

.twoColElsLtHdr #footer p {

margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */

padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */

}

/* Miscellaneous classes for reuse */

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */

float: right;

margin-left: 8px;

}

.fltlft { /* this class can be used to float an element left in your page */

float: left;

margin-right: 8px;

}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */

clear:both;

height:0;

font-size: 1px;

line-height: 0px;

}

iefix.css

/* CSS Document */

.twoColElsLtHdr #sidebar1

{

padding-top: 30px;

}

.twoColElsLtHdr #mainContent

{

zoom: 1; padding-top: 15px;

}

.twoColElsLtHdr #topshader

{

background-image:url('/style/superligth/x.gif');

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/style/header.png', sizingMethod='scale');

background-position:right;

background-repeat:no-repeat;

z-index:9;

width:100%;

position:absolute;

top:0px;

float:right;

}

.twoColElsLtHdr #right-tool-bg

{

background-image:url('/style/superligth/x.gif'); /*Существующий програчный пустой гиф*/

background-repeat:repeat-y;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/style/right_tool.png', sizingMethod='crop');

z-index:1;

}

Обратите внимание на выделенные моменты. Если что не понятно, спрашивайте, отвечу. Эту штуку я выдрал из JS-скрипта SuperSleight. Но его использование чревато некоторыми моментами - это и отключенная поддержка JavaScript и замедление "опрозрачивания".