PNG-afbeelding wordt niet goed weergegeven door IE 9

[antonwas]

Beste lezers,

Ik heb een klein probleempje (denk ik) met het weergeven van een PNG-afbeelding in IE 9. Met de code is niets fout, want in Safari en FF werkt het wel. Ook IE 9 herkent de afbeelding wel, maar hij geeft hem niet weer. Ik krijg niet zo'n vakje met een rood kruisje, maar een grijs vakje met een blauw kadertje erom en in het midden van het vakje staat het eigen afbeeldingsicoon van IE 9 wat de afbeedling moet representeren.

Ik denk dat er wel iets mis zal zijn met de transparantie van de afbeelding, maar aangezien ik hier weinig verstand van heb stel ik daarom ook de vraag.

Groet,

Anton

 

[Naarling]

Zonder link naar de site kunnen we weinig beginnen.

 

[Solaris]

png is een vrij formaat. MS heeft nooit een goede ondersteuning van png gehad, het zou met versie 8 en 9 zelfs nog meer wel beter moeten zijn, maar ja, MS... Mogelijk heeft de PNG attributen die niet ondersteund worden.
Kun je de afbeelding vervangen door een jpg of een gif (in eigen website) of is dat niet aan de orde?

 

[csshunter]

Hoi Anton,
Doet dezelfde pagina/png het wel goed in IE6, IE7, IE8?
En ik sluit me aan bij Naarling: linkje?

 

[antonwas]

Bij deze stuur ik graag even een linkje:

http://members.casema.nl/fam.wassenaar/#

Het gaat om een oefenpagina die ik gemaakt heb, het probleem zit hem in het pijltje van de styleswitcher. Deze styleswitcher draait op jquery. Tot mijn stomme verbazing blijkt het PNG bestandje wel te werken wanneer de pagina online staat, zoals nu het geval is, maar wanneer ik hem lokaal bekijk krijg ik het plaatje niet.

Overigens is de hover functionaliteit wel tergend langzaam (bij mij in ieder geval) Dat is lokaal ook niet het geval. Ik weet niet hoe jullie dat ervaren, maar volgens mij hoort dat niet. Het plaatje is nu ook nog wel even overdreven groot, omdat ik in eerste instantie dacht dat het plaatje te klein zou zijn om weergegeven te worden in IE. Maar dat is eigenlijk onzin, want in alle andere browsers werkt het wel. Het plaatje moet uiteindelijk maar 15 x 15 pixels zijn.

Daarnaast moeten alle drie de knoppen netjes naast elkaar komen te staan, maar dat gebeurt automatisch, als het pijltje de juiste grootte heeft (15 x 15 pixels) Verder staat er nog een lelijk blauw/paars kader rond de afbeelding.

Alle hier opgesomde problemen doen zich enkel en alleen voor bij IE 9. Alle andere browsers worden wel goed ondersteund. Ik heb nog niet getest met eerdere versies van IE, maar bij mijn weten kun je maar ��n versie van IE tegelijk draaien op je computer, dus dat gaat wat lastig. Bovendien gaat het om een vierkant plaatje met een zwart/groen pijltje. Alleen het pijltje moet zichtbaar zijn, de achtergrond niet. Vandaar dat ik gekozen heb voor PNG. Het kan ook wel met JPG of GIF, maar dan moet ik de achtergrondkleur van het plaatje precies hetzelfde maken als de achtergrondkleur van de styleswitcher.

Hopelijk heb ik zo meer duidelijkheid gegeven.

Groet,

Anton

 

[csshunter]

Hoi Anton,

Png-toestanden
Over de png-troubles in IE9 (in IE7 heb ik geen last!): eigenlijk kan je net zo goed een transparant gifje gebruiken voor de pijltjes; dan ben je zeker van alle problemen af (voor alle IE-versies).
Met deze

van 12x12px (pijl1-nw.gif) krijg je een prima resultaat.
Zie hier een screenshot met deze transparante gif over de grijze achtergrond gemonteerd, en dan 400% vergroot:

Daar hoef je het niet voor te laten!

=====

hover functionaliteit wel tergend langzaam

In IE7 heb ik daar ook geen last van, net zo min als in Firefox, Chrome, Opera en Safari.
Wat wel zo is: het stylesheet heeft een fout (zegt ook de css-validator). Helemaal op het eind staat zonder boe of bah:

.pijl1_hover

(geen accolades, geen inhoud)
Misschien dat IE9 daar moeite mee heeft?

=====
Over de styles
Ik zou de tekst "StyleSwitcher" ook aanklikbaar maken, net als het pijltje. Dat kan eenvoudig met het weglaten van de <h3>, en dan deze tekst opnemen in de link van het pijltje (+ wat css om de letters op juiste formaat en bold te krijgen):

<a href="#" id="pijllink"><img src="pijl1.png" alt="Expand styleswitcher" 
    class="pijltje"> Style Switcher</a>

De paarse rand kan er van af door voor het img een border:0; op te geven.
Met de volgende css-aanpassingen:

.pijltje {
   float:left;
   height:12px;
   width:12px;
   border:0;
   margin-top:1px;
   margin-right:5px;
}
#pijllink {
   font-weight: bold; 
   font-size: 1.1em; 
   text-decoration: none; 
   color: black; 
   outline: 0;
   }
#switcher-default {
   clear: left;
}

... komen deze uit de bus:

Met vriendelijke groet,
CSShunter
__________
PS: fabricage van het bovenstaande met dank aan Firebug en de Web Developer Toolbar voor Firefox:
online uitproberen met direct resultaat!