Transparantie: welke mogelijkheid kiezen?

[R2D2]

Ik zit met een klein vraagje, ik werk met een transparant menu op mijn website en dat doe ik doormiddel van de opacity declaratie in de CSS. Werkt in principe prima en in alle hedendaagse browsers. Geen enkel probleem zou je zeggen... maar toch wel.

Wat is het probleem,
1 - bij gebruik van opacity via de CSS geeft Internet Explorer een klein probleempje, de letters worden niet weergegeven met clear type. Nu valt dat niet heel erg op en is het ook niet ontzettend storend.

2 - Bij firefox op de mac levert opacity ook een klein probleem op, de opacity word namelijk over de hele pagina mee genomen. Dat betekent dus dat alle letters op mijn website net even iets waziger zijn dan ze horen te zijn. Dit is een bugje in firefox zo lijkt het, in het stuk word een opacity:0.9999 aangehaald en dat heb ik geprobeerd maar lijkt niet echt te helpen. Misschien dat ik daar nog even verder moet gaan knutselen.

De tekst word overigens niet onleesbaar maar je hebt het idee dat je tegen een dubbele cleartype aan zit te kijken.

Een andere oplossing is gebruik gaan maken van een .png achtergrond. Nu word die sindskort ook ondersteund door IE7 maarrrrrrr niet iedereen gebruikt IE7. Om het .png probleem op te lossen in IE6 zal ik aan de slag moeten met javascript, werkt ook prima maar voor zover ik na kon gaan kun je die maar 1 keer gebruiken op een pagina in een div id="' met als gevolg dat ik tegen een probleem aan loop bij het gebruik van de suckerfish menu's

Wat is dus de verstandigste keuze? Het aantal mac gebruikers op mijn site is minder dan 2%, daarvan gebruikt een klein deel firefox het overgrote deel van de mac bezitters gebruikt safari op de site. Het probleem met wazige tekst is dus van toepassing op een zeer klein aantal bezoekers.

Laat ik het dus voor wat het is en blijf ik gebruik maken van opacity OF ga ik een partij javascript gebruiken om de png correctie uit te voeren voor het overgrote deel van de bezoekers?

[Snake]

Neen hoor, je kan het doen voor iedere image.

Via een loop ga je door alle img's, indien de extensie .png is, wordt een DX alpha filter toegepast

Ik heb even Google gevraagd, en die gaf me dit:

http://homepage.ntlworld.com/bobosola/pngfix.js

In de eerste 10 regels staat hoe je het toe moet passen

Succes

[ Voor 36% gewijzigd door Snake op 19-08-2007 15:54 ]

[R2D2]

Maar werkt dat ook met backgrounds die vanuit een css file worden ingezet? Ik heb geen IE6 om het te testen (Vista op de pc en zo even niets anders bij de hand op het moment) namelijk. Volgens mij werkt dat namelijk alleen voor images die in een <img src="" /> stukje staan en niet voor images "die vanuit" een CSS file komen.

[ Voor 4% gewijzigd door R2D2 op 19-08-2007 16:07 ]

[remcotolsma]

Je kunt DX alpha filter ook gebruiken in CSS:

Cascading Stylesheet:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/styles/background.png", sizingMethod='scale');

Werkt volgens mij niet altijd even goed in alle situaties, maar je kunt het altijd proberen.

De 'opacity' attribuut in CSS maakt afaik ook het hele element inclusief voorgrond kleur doorzichtig. Dit is vaak niet gewenst dus dan zou je een png achtergrondje moeten gebruiken. IE 6 ondersteund dit niet, maar in een specifieke stylsheet voor IE 6 of lager kun je ook gewoon een effen kleur aan het element geven. Dan zit het er in IE 6 misschien een beetje anders uit, maar IE 6 is toch verleden tijden.

[R2D2]

Toch gebruikt 38% van de bezoekers op mijn site nog IE6 dus verleden tijd lijkt het nog steeds niet te zijn.

Nu heb ik een oplossing gevonden, Niakmo in "[CSS] PNG Fix voor background"

Dat werkt ECHTER blijft het probleem met de crispy letters bij IE. Nu is dat niet zo heel erg maar IE7 ondersteund png wel fatsoenlijk en hoeft dus geen gebruik te maken van het script. Wanneer ik het script namelijk niet include zijn de letters in IE7 wel zoals ze horen te zijn.

Misschien dat een aparte stylesheet voor IE6 en lager ook nog niet eens zo'n heel erg gek idee is, het gaat tenslotte maar om hooguit 5 regels CSS code.... scheelt een hoop ten opzichte van het javascript wat ik nu gebruik.

[Pendaco]

Mjah transparante png's in IE6 blijft en zal waarschijnlijk altijd wel een drama blijven.
Ik heb er zelf bij een recent project ook voor gekozen om een aparte css voor IE6 en lager te gebruiken.

Nog een nadeel is dat bij gebruik van die filters voor IE6 je pagina enorm veel processorkracht kan gaan vreten, vooral voor mensen met wat mindere pc's kan dit als vervelend worden ervaren.

[BtM909]

Onthou dat je hier conditional comments voor gebruikt, dat is IE browser proof en ook nog eens overzichtelijk

[P.O. Box]

Snake schreef op zondag 19 augustus 2007 @ 15:53:
Neen hoor, je kan het doen voor iedere image.

Via een loop ga je door alle img's, indien de extensie .png is, wordt een DX alpha filter toegepast

Ik heb even Google gevraagd, en die gaf me dit:

http://homepage.ntlworld.com/bobosola/pngfix.js

In de eerste 10 regels staat hoe je het toe moet passen

Succes

ik gebruik die ook ( om 3:15 's nachts? ja, inderdaad )... maar bij mij blijft af en toe de blauwe balk onderin lopen alsof hij de pagina nog aan het laden is, met de mededeling dat hij een van de PNG's aan het ophalen is... terwijl de pagina wel al volledig correct (inclusief de bewuste PNG) wordt weergegeven....