Transparantie middels png werkt niet op de MAC

Ik heb een png gebruikt voor een transparante schaduw. Op de PC in IE 6.0 werkt het en ziet er goed uit. Echter is op de MAc niets te zien.

Zie hieronder de code die ik heb gebruikt.

<style>
#logo {
cursor:hand;
margin-top: 10px;
height: 92px;
width: 310px;
z-index: 2;
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘images/logo.png’,sizingMethod=‘fixed’);
}
</style>

<a href="#"><div id=“logo”></div></a>

Wat doe ik niet goed?

Als je PNG een 24-bits PNG is (en geen 8 Bits!) werkt het uitstekend op een Mac. Die rare regel die je gebruikt filter: etc. is geen geldige CSS, maar een filter dat alleen door Internet Explorer op Windows begrepen wordt. Waarom is dat? Om 1 reden: Internet Explorer ondersteunt namelijk niet uit zichzelf transparantie in PNG, daar heb je die rare regel voor nodig.

Verander je CSS als volgt:

[code:1:f5c4dba562]
#logo {
cursor:hand;
margin-top: 10px;
height: 92px;
width: 310px;
z-index: 2;
background-image: url(images/logo.png) no-repeat 0 0;
}

  • html #logo {
    background : none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘images/logo.png’,sizingMethod=‘fixed’);
    }
    [/code:1:f5c4dba562]

en je zal zien dat browsers op de Mac transparante PNG’s prima ondersteunen.

Hetzelfde geldt overigens ook voor Firefox en Opera op Windows overigens, het heeft niet zoveel met het Apple platform te maken.

Volgens mij werkt het juist niet helemaal lekker op de PC in IE6...

Verander die <style> eens naar <style type="text/css">. Anders weergeeft ie helemaal niks (hoewel dat sommige browsers kunnen raden dat het om CSS gaat...).

Even wat anders, maar ik zelf had ook

cursor: hand;

veranderd in:

cursor: pointer;

[quote:8101877b5b="à la Mac"]Verander die <style> eens naar <style type="text/css">. Anders weergeeft ie helemaal niks (hoewel dat sommige browsers kunnen raden dat het om CSS gaat...).[/quote:8101877b5b]

Dit is absoluut geen vereiste, alle recente browsers zullen dit juist interpreteren. Het is echter wel goed dit er altijd bij te zetten.

Gebruik eens een absoluut pad naar je afbeelding.

Ik las de oplossing van tennapel en dacht dat is het, helaas werkt het nog niet. Wat betreft <style>: dat gebruik ik niet ik include de css nl. Nu ga ik proberen wat konijn schrijft, zou het ook kunnen zijn.

Thanks voor jullie hulp!

[quote:e64ea1f4b4="klaus"]Dit is absoluut geen vereiste, alle recente browsers zullen dit juist interpreteren.[/quote:e64ea1f4b4] Dat is vooral omdat er eigenlijk maar één manier is om stijlen te definiëren, en dat is CSS. Maar als er in de toekomst een andere methode ontwikkeld wordt, zal de browser het misschien moeilijker kunnen raden en kunnen oudere pagina's misschien problemen opleveren als het niet expliciet vermeld wordt dat het hier om CSS gaat. Dus daarom: gewoon altijd erbij zetten, dan weet je zeker dat het goed zal gaan.

[quote:8416f399e3="Jakko Westerbeke"][quote:8416f399e3="klaus"]Dit is absoluut geen vereiste, alle recente browsers zullen dit juist interpreteren.[/quote:8416f399e3] Dat is vooral omdat er eigenlijk maar één manier is om stijlen te definiëren, en dat is CSS. Maar als er in de toekomst een andere methode ontwikkeld wordt, zal de browser het misschien moeilijker kunnen raden en kunnen oudere pagina's misschien problemen opleveren als het niet expliciet vermeld wordt dat het hier om CSS gaat. Dus daarom: gewoon altijd erbij zetten, dan weet je zeker dat het goed zal gaan.[/quote:8416f399e3]

En daarbij, het is verplicht om er type="text/css" bij te zetten, dat scheelt weer een error :).

Thanks konijn, dit was het euvel, 't werkt!

[quote:6f4941a368="à la Mac"]En daarbij, het is verplicht om er type="text/css" bij te zetten, dat scheelt weer een error :).[/quote:6f4941a368] Nou ja, om het echt precies te maken: het is verplicht om er de [i:6f4941a368]type[/i:6f4941a368]-attribute bij te zetten, en daarin heb je maar één mogelijke invulling die algemeen gangbaar is, namelijk "text/css". Je kan natuurlijk je eigen browser schrijven en een heel ander soort stijlen implementeren, waardoor jouw pagina's misschien [i:6f4941a368]type="text/veelbeterestijlsheet"[/i:6f4941a368] gebruiken, maar ik gok dat weinig andere browsers daarmee overweg kunnen ;)