IE PNG probleem (IE7+)

   LOCKED 

Ik ben vandaag mijn nieuwe portfolio gaan testen op de PC van m'n ouders met IE. Logisch dat transparante PNG's niet werken binnen IE6 zonder hack of fix, maar dat ze in IE 7 en 8 ook niet werken is toch raar. Heb nog geen fix kunnen vinden. Misschien dat het aan het PNGtje zelf ligt. Iemand een idee?

Hier mijn probleem:


Links: Firefox 3.x
Rechts: IE7 & 8

Wat heb ik nu geprobeerd:

- Zowel de Wordpress versie als de HTML versie werken niet en vertonen beide dit probleem, zie hier:
* HTML: http://www.patrickheiloo.nl/etc
* Wordpress: http://www.patrickheiloo.nl/2011
* Origineel Photoshop design: http://projects.patrickheiloo.nl/patrickheiloo/2011
- Alle Javascript onderdelen zijn per onderdeel uitgeschakeld om te kijken of het dan werken wil. Dan praten we over:
* Twitter
* Contentslider
* Mouse-over transparantie
- Ik heb een PNG fix toegepast binnen Wordpress zonder resultaat.
- CSS3 text-shadow zou niet moeten werken in IE7 en IE8. Nu worden ze wel getoond als zwarte pixels.
- Soort gelijk project zonder de klachten: http://www.zomerfestival-hensbroek.nl
- Alle instellingen van Photoshop gereset.
- Items verplaatst naar nieuw Photoshop document en vervolgens weer gesliced + gesaved.
- Het gaat goed in Firefox, Chrome en Safari. Bij sommige ook in IE.

Photoshop settings:
Afbeeldingsgrootte: image
Opslaan voor web & apparaten: image
Opslaan voor web & apparaten, je ziet dat ik PNG heb geselecteerd, maar hij laat GIF zien: image

Hmm.. Heb in het verleden ook veel problemen gehad met PNG in combinatie met IE! Als wat voor PNG heb je hem opgeslagen, PNG-8 of PNG-24.. Dit kan namelijk ook een ander resultaat geven. Heb ooit op een forum een zelfde soort probleem gezien, zal is kijken of ik het nog kan terug vinden!

Je kan natuurlijk ook gewoon in je CSS de schaduw toevoegen.

Met CSS3 kan dat inderdaad heel makkelijk! Alleen ondersteunen niet alle browsers dit.. Natuurlijk zijn er hacks en zijn er nog andere dingen mogelijk om dit met de oudere CSS te doen, maar die PNG's moeten natuurlijk gewoon werken.

Wow, dat ziet er echt lelijk uit in IE. Dus dit is waar je het over had op Twitter.?
Nouja, je pop-up oplossing was geniaal.?

Gebruik anders voor de thumbs gifjes?

Het probleem is zojuist opgelost. Uitleg:

Internet Explorer 9 heeft nu ondersteuning voor CSS3, hiervoor zijn wel de door Microsoft gemaakte CSS attributen (filters) nodig. Blijkbaar zorgt dit filter voor problemen in oude versies van IE (6, 7 en 8). Zodra je dat filter combineert met display block past IE het filter op de gehele DIV laag toe. Het filter is eruit en zal alleen worden geactiveerd als je met IE 9 de site bezoekt.