Frage zu PNG Transparenz in <= IE6

timbo

Addicted

Registered: May 2007
Location: umbrella corpora..
Posts: 483

27.08.2007 - 10:38

Hallo,

mir ist bekannt, dass PNG Transparenz in Verbindung mit <=IE6 Probleme verursacht.
Ich habe bisher keine Lösung gefunden.

Was habe ich:
ein Logo, dass ich per CSS eingebunden habe:

div#logo {

position:absolute; top:-34px; left:15px;
float:left;
background: url(../images/logo.png) 0 0 no-repeat;
width:610px;
height:122px;
padding:0px;
}

Was um alles in der Welt muss ich anstellen um diesem logo.png und viel mehr dem IE6 mitzuteilen, dass der Hintergrund des Logos gefälligst transparent sein soll?

Gibt es hier nen simplem Trick?

Danke

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

27.08.2007 - 11:00

Transparenz bei 24-bit PNGs verursacht keine Probleme im IE6... der IE6 unterstützt das einfach nicht

Es gibt aber einen Javascript hack:

Code: PHP

<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   for(var i=0; i<document.images.length; i++)
      {
	  var img = document.images[i]
	  var imgName = img.src.toUpperCase()
	  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
	     {
		 var imgID = (img.id) ? "id='" + img.id + "' " : ""
		 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
		 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
		 var imgStyle = "display:inline-block;" + img.style.cssText 
		 if (img.align == "left") imgStyle = "float:left;" + imgStyle
		 if (img.align == "right") imgStyle = "float:right;" + imgStyle
		 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle		
		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
		 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
	     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
		 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
		 img.outerHTML = strNewHTML
		 i = i-1
	     }
      }
   }
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

Bearbeitet von Spikx am 27.08.2007, 11:06

timbo

Addicted

Registered: May 2007
Location: umbrella corpora..
Posts: 483

27.08.2007 - 12:15

Ja, das meinte ich ja damit ;-) Problem, weil geht nicht!

Den Hack habe ich bereits versucht - ging nicht wirklich.
Habe diesen in den head der index kopiert, so wie er da steht.
Muss ich dann noch etwas machen? Im CSS? Oder sollte das dann schon "tun"?

Danke

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

27.08.2007 - 12:19

Hm... zeig am besten mal her. Sollte im head stehen, ja. Funktioniert dort wo ich's verwendet habe auch einwandfrei.

timbo

Addicted

Registered: May 2007
Location: umbrella corpora..
Posts: 483

27.08.2007 - 12:25

http://www.elternzentrum.at

murcielago

Dr. Doom

Registered: Oct 2002
Location: *
Posts: 2692

27.08.2007 - 12:28

der head tag ist nicht zu.

timbo

Addicted

Registered: May 2007
Location: umbrella corpora..
Posts: 483

27.08.2007 - 12:29

doch, der ist zu:

<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = split( '=', _ISO );
?>

<!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">
<head>

<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter

rogid

XImageTransform.Microsoft.AlphaImageLoader"
+ "(src='" + img.src + "', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

<?php
if ( $my->id ) {
initEditor();
}
mosShowHead();

$user1_color = "blue"; // blue/orange
$user2_color = "orange"; // blue/orange
$user3_color = "blue"; // blue/orange

?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css"/>
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/topmodules.css" rel="stylesheet" type="text/css"/>
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/contentareas.css" rel="stylesheet" type="text/css"/>


</head>

Snoop

Here to stay

Registered: Jun 2002
Location: Gablitz
Posts: 1092

03.09.2007 - 12:55

vergiss es einfach, habs damals auch nicht geschafft und hab 4 verschiedene hacks ausprobiert alle mit dem selben ergebnis, dass das bild entweder auf einmal weg war oder sau lang zum laden gebraucht hat weil er es neu berechnet dann aber trotzdem keine transparenz sichtbar war :/
Leider bleiben da nur die gifs oder korrektes ausschneiden mit hintergrund.

MFG
Snoopal

sensei

die Küstenwache?

Registered: Dec 2000
Location: Bad Schlotterbac..
Posts: 709

03.09.2007 - 20:09

hier n interessanter link zum thema

lünk

hth

timbo

Addicted

Registered: May 2007
Location: umbrella corpora..
Posts: 483

10.09.2007 - 10:02

Danke, aber das habe ich auch schon versucht - nichts.

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

10.09.2007 - 11:12

Wirkt sich eben (wie auch der JS hack) nur auf img Elemente aus und nicht auch auf background-images. Du müsstest halt alles auf img umbauen... falls überhaupt möglich.

moidaschl

Vollzeit-Hackler

Registered: Aug 2002
Location: 1210, ABK-D/L
Posts: 4029

10.09.2007 - 19:07

Ich hab mich erst kürzlich damit spielen müssen... mir ist richtig das "geimpfte" aufgegangen als im ff alles funktioniert hat und dann ein schneller crosscheck im IE 6 gezeigt hat das es dort natürlich nicht funktioniert.

meine, jedoch nicht befriedigende, lösung (oder eher workaround).. mit png die seite gebastelt, im ff angezeigt, einen screenshot gemacht, logo inklusive background ausgeschitten, neues png angelegt (ohne transparenz diesmal) und dann wieder an der selben stelle angezeigt.. funkt jetzt natürlich, aber der coole transparenzeffekt ist weg.
somit lassen sich jetzt keine bilder darunter legen usw. als gif speichern ist auch keine alternative die quali ist unter aller sau!

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4477

11.09.2007 - 09:35

Ad background Problem: hier ist anzumerken dass die von MS zur verfügung stehende Technologie schon Hintergrundbilder transparent darstellen kann, das hilfreiche Javascript sich aber nur um im HTML inline PNGs kümmert.

@moidaschl: heft. für mich hat sich in der Praxis gezeigt dass es aber nicht wirklich viel Arbeit ist. Aber es ist lästig. Zuerst CSS für FF machen und dann per Conditional Comments ein IE CSS laden dass dann am selben Element den AlphaImageLoader anwendet. Geht ohne gröbere Probleme.

moidaschl

Vollzeit-Hackler

Registered: Aug 2002
Location: 1210, ABK-D/L
Posts: 4029

11.09.2007 - 10:17

Zitat von Rektal
Ad background Problem: hier ist anzumerken dass die von MS zur verfügung stehende Technologie schon Hintergrundbilder transparent darstellen kann, das hilfreiche Javascript sich aber nur um im HTML inline PNGs kümmert.

@moidaschl: heft. für mich hat sich in der Praxis gezeigt dass es aber nicht wirklich viel Arbeit ist. Aber es ist lästig. Zuerst CSS für FF machen und dann per Conditional Comments ein IE CSS laden dass dann am selben Element den AlphaImageLoader anwendet. Geht ohne gröbere Probleme.

ja so werd ichs das nächste mal probieren, jetzt passts daweil eh (ich greif da nix mehr an .. never touch a running system und so

)

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4477

11.09.2007 - 11:33

Wie sagt schon die Budweiser-Werbung? "True.True."

timbo Addicted Registered: May 2007 Location: umbrella corpora.. Posts: 483	27.08.2007 - 10:38 Hallo, mir ist bekannt, dass PNG Transparenz in Verbindung mit <=IE6 Probleme verursacht. Ich habe bisher keine Lösung gefunden. Was habe ich: ein Logo, dass ich per CSS eingebunden habe: div#logo { position:absolute; top:-34px; left:15px; float:left; background: url(../images/logo.png) 0 0 no-repeat; width:610px; height:122px; padding:0px; } Was um alles in der Welt muss ich anstellen um diesem logo.png und viel mehr dem IE6 mitzuteilen, dass der Hintergrund des Logos gefälligst transparent sein soll? Gibt es hier nen simplem Trick? Danke
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	27.08.2007 - 11:00 Transparenz bei 24-bit PNGs verursacht keine Probleme im IE6... der IE6 unterstützt das einfach nicht Es gibt aber einen Javascript hack: Code: PHP <!--[if gte IE 5.5000]> <script language="JavaScript"> function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher. { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" img.outerHTML = strNewHTML i = i-1 } } } window.attachEvent("onload", correctPNG); </script> <![endif]--> Bearbeitet von Spikx am 27.08.2007, 11:06
timbo Addicted Registered: May 2007 Location: umbrella corpora.. Posts: 483	27.08.2007 - 12:15 Ja, das meinte ich ja damit ;-) Problem, weil geht nicht! Den Hack habe ich bereits versucht - ging nicht wirklich. Habe diesen in den head der index kopiert, so wie er da steht. Muss ich dann noch etwas machen? Im CSS? Oder sollte das dann schon "tun"? Danke
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	27.08.2007 - 12:19 Hm... zeig am besten mal her. Sollte im head stehen, ja. Funktioniert dort wo ich's verwendet habe auch einwandfrei.
timbo Addicted Registered: May 2007 Location: umbrella corpora.. Posts: 483	27.08.2007 - 12:25 http://www.elternzentrum.at
murcielago Dr. Doom Registered: Oct 2002 Location: * Posts: 2692	27.08.2007 - 12:28 der head tag ist nicht zu.
timbo Addicted Registered: May 2007 Location: umbrella corpora.. Posts: 483	27.08.2007 - 12:29 doch, der ist zu: <?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); // needed to seperate the ISO number from the language file constant _ISO $iso = split( '=', _ISO ); ?> <!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"> <head> <!--[if gte IE 5.5000]> <script language="JavaScript"> function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher. { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filterrogidXImageTransform.Microsoft.AlphaImageLoader" + "(src='" + img.src + "', sizingMethod='scale');\"></span>" img.outerHTML = strNewHTML i = i-1 } } } window.attachEvent("onload", correctPNG); </script> <![endif]--> <?php if ( $my->id ) { initEditor(); } mosShowHead(); $user1_color = "blue"; // blue/orange $user2_color = "orange"; // blue/orange $user3_color = "blue"; // blue/orange ?> <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css"/> <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/topmodules.css" rel="stylesheet" type="text/css"/> <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/contentareas.css" rel="stylesheet" type="text/css"/> <!--[if IE 6]> <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_ie.css" rel="stylesheet" type="text/css"/> <![endif]--> <!--[if IE 7]> <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_ie7.css" rel="stylesheet" type="text/css"/> <![endif]--> </head>
Snoop Here to stay Registered: Jun 2002 Location: Gablitz Posts: 1092	03.09.2007 - 12:55 vergiss es einfach, habs damals auch nicht geschafft und hab 4 verschiedene hacks ausprobiert alle mit dem selben ergebnis, dass das bild entweder auf einmal weg war oder sau lang zum laden gebraucht hat weil er es neu berechnet dann aber trotzdem keine transparenz sichtbar war :/ Leider bleiben da nur die gifs oder korrektes ausschneiden mit hintergrund. MFG Snoopal
sensei die Küstenwache? Registered: Dec 2000 Location: Bad Schlotterbac.. Posts: 709	03.09.2007 - 20:09 hier n interessanter link zum thema lünk hth
timbo Addicted Registered: May 2007 Location: umbrella corpora.. Posts: 483	10.09.2007 - 10:02 Danke, aber das habe ich auch schon versucht - nichts.
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	10.09.2007 - 11:12 Wirkt sich eben (wie auch der JS hack) nur auf img Elemente aus und nicht auch auf background-images. Du müsstest halt alles auf img umbauen... falls überhaupt möglich.
moidaschl Vollzeit-Hackler Registered: Aug 2002 Location: 1210, ABK-D/L Posts: 4029	10.09.2007 - 19:07 Ich hab mich erst kürzlich damit spielen müssen... mir ist richtig das "geimpfte" aufgegangen als im ff alles funktioniert hat und dann ein schneller crosscheck im IE 6 gezeigt hat das es dort natürlich nicht funktioniert. meine, jedoch nicht befriedigende, lösung (oder eher workaround).. mit png die seite gebastelt, im ff angezeigt, einen screenshot gemacht, logo inklusive background ausgeschitten, neues png angelegt (ohne transparenz diesmal) und dann wieder an der selben stelle angezeigt.. funkt jetzt natürlich, aber der coole transparenzeffekt ist weg. somit lassen sich jetzt keine bilder darunter legen usw. als gif speichern ist auch keine alternative die quali ist unter aller sau!
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4477	11.09.2007 - 09:35 Ad background Problem: hier ist anzumerken dass die von MS zur verfügung stehende Technologie schon Hintergrundbilder transparent darstellen kann, das hilfreiche Javascript sich aber nur um im HTML inline PNGs kümmert. @moidaschl: heft. für mich hat sich in der Praxis gezeigt dass es aber nicht wirklich viel Arbeit ist. Aber es ist lästig. Zuerst CSS für FF machen und dann per Conditional Comments ein IE CSS laden dass dann am selben Element den AlphaImageLoader anwendet. Geht ohne gröbere Probleme.
moidaschl Vollzeit-Hackler Registered: Aug 2002 Location: 1210, ABK-D/L Posts: 4029	11.09.2007 - 10:17 Zitat von Rektal Ad background Problem: hier ist anzumerken dass die von MS zur verfügung stehende Technologie schon Hintergrundbilder transparent darstellen kann, das hilfreiche Javascript sich aber nur um im HTML inline PNGs kümmert. @moidaschl: heft. für mich hat sich in der Praxis gezeigt dass es aber nicht wirklich viel Arbeit ist. Aber es ist lästig. Zuerst CSS für FF machen und dann per Conditional Comments ein IE CSS laden dass dann am selben Element den AlphaImageLoader anwendet. Geht ohne gröbere Probleme. ja so werd ichs das nächste mal probieren, jetzt passts daweil eh (ich greif da nix mehr an .. never touch a running system und so )
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4477	11.09.2007 - 11:33 Wie sagt schon die Budweiser-Werbung? "True.True."

Frage zu PNG Transparenz in <= IE6

Forum Index > Software > Coding Stuff

timbo

Spikx

timbo

Spikx

timbo

murcielago

timbo

Snoop

sensei

timbo

Spikx

moidaschl

Rektal

moidaschl

Rektal