PNG i IE

Jaa, det är väl en smaksak. Själv säger jag så här:

Bara en eller ett par bilder: min metod föredras.
Väldigt många bilder som kräver just png-24-genomskinlighet: kan hända att din metod är bättre.

// Oliver Olofsson

För min del är det bara en ända bild som är av PNG-formatet... Vilken av metoderna skall jag använda? pimpN:s metod ser ju mest koncis ut, jag förstår dock inte riktigt implementationen... Kan ngn förklara lite närmare! Kanske ett exempel

Tack

Förstår inte riktigt detta:

pimpN skrev:

1. Skapa en Internet Explorer-specifik CSS-fil vid namn url(style.css) all

learn skrev:

Förstår inte riktigt detta:

Det kanske klarnar om ni läser det här: http://annevankesteren.nl/2005/10/ie-import-hack ;)

Kort och gott: du använder följande kod i ditt HTML-dokument:

<style type="text/css">
 @import url(style.css) all;
</style>

..där "style.css" är din vanliga stilmall, och "url(style.css) all" är en annan stilmall som IE läser istället! :)

pimpN skrev:

Eftersom det är ett javascript kommer det inte att fungera då dessa är inaktiverade. Du kan köra med detta:

1. Skapa en Internet Explorer-specifik CSS-fil vid namn url(style.css) all

[red]@import url(style.css);

.foo {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bar.png', sizingMethod='scale');
}[/red]

2. Lägg till följande i din vanliga CSS-fil som har namnet style.css

[red].foo { background: url(bar.png) }[/red]

Edit: OBS! Fråga mig inte varför src='bar.png' fuckar sig i den första kodsnutten ;/

// Oliver Olofsson

Hej
Jag har problem att få till det här. Har en sida på myspace.com och där är inte javascript tillåtet så detta verkar vara den enda lösning som rent teoretiskt kan funka.

Har följt intruktionerna ovan men när jag lägger in .foo i mitt "vanliga" style-sheet, style.css, så försvinner bilden helt. Det IE-specifika dokumentet ser ut såhär:

<style type="text/css">
@import url(style.css);

.foo {background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file:///H:/Soardy/Myspace/soardy_logga_svar

t.png', sizingMethod='scale');
}
</style>

Det ordinarie dokumentet ser ut såhär:

.foo
table table table table td.text a {
display:block;
width:170px;
height:61px;
margin:0px;
background-image:url(file:///H:/Soardy/Myspace/soardy_logga_svart.png);
background-repeat:no-repeat;

Jag bytte alltså ut bar.png mot den bild jag vill ha. Är det fel och isåfall, hur ska jag då går tillväga?

Tack på förhand!
/ Fredrik