png billede ikke transparent

Uha at gøre et png billede transparent i IE6 er ikke bare noget man gør, IE6 understøtter nemmelig ikke transparente png filer kun gif.
Den nemmeste løsning er at farve baggrunden så den matcher baggrunden på hjemmesiden.
En lidt mere avanceret løsning er lidt java og sådanne.

En god side er denne Trans png i IE6

/Rex

Det virkede ikke :/

Men jeg har fundet en måde at komme omkring det på - eller måske.

Med 'conditional comments' kan jeg skifte til et andet stylesheet hvis der bruges en version af IE der er lavere end version 7.

Koden ser således ud:

    <link rel="stylesheet" type="text/css" href="style.css">
   
   
    <!--[if lt IE7]>
    <link rel="stylesheet" type="text/css" href="style_ltIE7.css">
    <![endif]-->


style_ltIE7.css er nøjagtig magen til den første, pånær at baggrundsbilledet er gif istedet for png. Det ser lidt sluggish ud som gif - men den virker.


Dog bliver de to conditional comments tags også vist på siden. Det kan jeg ikke lige gennemskue hvorfor :S

Java udgaven bør virke, har selv benyttet den tidligere.

[code]
<script src="templates/template/js/unitpngfix/unitpngfix.js" type="text/javascript"></script>
<![endif]-->
[/code]

[code]
var clear="clear.gif" //path to clear.gif

pngfix=function(){var els=document.getElementsByTagName('*');var ip=/\.png/i;var i=els.length;while(i-- >0){var el=els[i];var es=el.style;if(el.src&&el.src.match(ip)&&!es.filter){es.height=el.height;es.width=el.width;es.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+el.src+"',sizingMethod='crop')";el.src=clear;}else{var elb=el.currentStyle.backgroundImage;if(elb.match(ip)){var path=elb.split('"');var rep=(el.currentStyle.backgroundRepeat=='no-repeat')?'crop':'scale';es.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path[1]+"',sizingMethod='"+rep+"')";es.height=el.clientHeight+'px';es.backgroundImage='none';var elkids=el.getElementsByTagName('*');if (elkids){var j=elkids.length;if(el.currentStyle.position!="absolute")es.position='static';while (j-- >0)if(!elkids[j].style.position)elkids[j].style.position="relative";}}}}}
window.attachEvent('onload',pngfix);
[/code]

Der følger dog en gif fil med, den kan jeg sende til dig hvis det er, men det er bare en blank gif fil 1x1 intet andet.

/Rex

damn eksperten.dk kunne ikke håndtere koden :(


<script src="templates/template/js/unitpngfix/unitpngfix.js" type="text/javascript"></script>
<![endif]-->

--

var clear="clear.gif" //path to clear.gif

pngfix=function(){var els=document.getElementsByTagName('*');var ip=/\.png/i;var i=els.length;while(i-- >0){var el=els[i];var es=el.style;if(el.src&&el.src.match(ip)&&!es.filter){es.height=el.height;es.width=el.width;es.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+el.src+"',sizingMethod='crop')";el.src=clear;}else{var elb=el.currentStyle.backgroundImage;if(elb.match(ip)){var path=elb.split('"');var rep=(el.currentStyle.backgroundRepeat=='no-repeat')?'crop':'scale';es.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path[1]+"',sizingMethod='"+rep+"')";es.height=el.clientHeight+'px';es.backgroundImage='none';var elkids=el.getElementsByTagName('*');if (elkids){var j=elkids.length;if(el.currentStyle.position!="absolute")es.position='static';while (j-- >0)if(!elkids[j].style.position)elkids[j].style.position="relative";}}}}}
window.attachEvent('onload',pngfix);

dette skulle virke ;)

/Rex

Wow, awesome.

Jeg downloadede lige unitpongfix pakken. Og nu virker det sgu.
Smid et svar op, så får du lige point.

Godt at det virkede ;)
Boksede selv med for nogle år siden, nu har jeg rent udsagt droppet at style til IE6, smider en meddeles om at browseren er udateret med nogle links til nye versioner af IE, FF, Crome og den der apple browser ting :)

/Rex