Transparantie werkt niet

[bekok]

Hallo,

Ik ben een website voor een klant aan het maken. Hier bij heb ik op elke pagina een nieuw achtergrond plaatje. Om dit plaatje goed te laten zien is de achtergrond van de tekst transparant. Een voorbeeld hier van kan je hier: http://mcdreamdesign.nl/miro/contact.php vinden. In FF, Safari en IE8 komt de transparantie goed door. In IE7 echter niet. Ik snap ook niet helemaal hoe dit komt, want ik heb opgezocht hoe het werkt met transparantie en volgens vrijwel elke website hoort dit:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.70;

te werken. Echter, hij pakt het niet op in IE7.
Weet iemand hoe ik dit kan oplossen? Klopt er iets niet in mijn code of doe ik iets anders fout..?

[himlims_]

werkt perfect hier onder opera, of ik snap 't probleem niet helemaal

[ Voor 38% gewijzigd door himlims_ op 14-09-2009 19:20 ]

[bekok]

himlims_ schreef op maandag 14 september 2009 @ 19:20:
werkt perfect hier onder opera, of ik snap 't probleem niet helemaal

Hij werkt alleen in IE7 niet, dat is het probleem. Aangezien er nog een groot deel mensen IE7 gebruikt kan ik dit niet zomaar laten vallen

[Umbrah]

Zoals hij al zei: het werkt niet in IE7. En dat zou kunnen kloppen, hoewel het een verbetering was tegenover IE6, is IE7 niet 100% compatible met dit soort truken. Je zult dit waarschijnlijk met een 'groffe' oplossing moeten oplossen, zoals mogelijk een aparte pagina voor oudere IE's, met mogelijk een apart achtergrond plaatje wat de transparantie 'emuleert'.

[Sebazztiaan]

Heb je ooit gekeken naar 'BelatedPNG' door middel van VML en js rendert hij alle transparency


ZELFS IN IE6

[ Voor 10% gewijzigd door Sebazztiaan op 14-09-2009 19:33 ]

[TheBorg]

Opacity voor alle browsers:

Cascading Stylesheet:

opacity     : 0.7;
MozOpacity  : 0.7;
KhtmlOpacity    : 0.7;
filter          : alpha(opacity=70);

[Sebazzz]

@borg: In Firefox 3.x en Opera zou alleen

Cascading Stylesheet:

element.style {
    opacity: 0.7;
}

moeten voldoen.

[crisp]

Voor IE8 (in standards compliant mode) kan je ook gewoon dit schrijven:

Cascading Stylesheet:

-ms-filter: "alpha(opacity=70)";

En voor IE7 helpt het als je voor #contactMain 'hasLayout' forceert

[ Voor 22% gewijzigd door crisp op 14-09-2009 22:27 ]

[curry684]

Naast dat deze hack alleen werkt met hasLayout zoals crisp aangeeft was het geloof ik ook zo dat IE7 het niet leuk vindt om zowel opacity als de DirectX filter te zien.

Daarnaast fixt ie8.js deze issue geloof ik iets eleganter.

[Sebazztiaan]

Het 'probleem' is dat alles wat op een transparante laag komt ook transparant wordt, en ik kan me voorstellen dat dit niet wenselijk is als de tekst ook transparant wordt!

[jbdeiman]

@Sebazztiaan
Ook daar zijn wel mogelijkheden voor hoor, dat maakt niet zo heel veel uit. Als je het op een bepaalde manier opbouwd (met floats wil niet, maar zelf positioneren wel) kan je 2 divs onder elkaar plaatsen (van voor naar achter bekeken, in 3-d vorm) zonder dat die (codetechnisch) in elkaar staan.
En dan kan je wel een deels transparante achtergrond gebruiken.

@bekok
Je kan misschien ook iets doen met (deels) transparante png-tjes? Zeker met een effen achtergrond maakt dat qua downloadtijden niet uit, een afbeeldinkje van 1x1 pix is dan al wel genoeg.

[bekok]

curry684 schreef op dinsdag 15 september 2009 @ 01:50:
Naast dat deze hack alleen werkt met hasLayout zoals crisp aangeeft was het geloof ik ook zo dat IE7 het niet leuk vindt om zowel opacity als de DirectX filter te zien.

Daarnaast fixt ie8.js deze issue geloof ik iets eleganter.

Hartstikke bedankt! Met dit scriptje is het in 1x gelukt. Dit is sowieso heel erg handig voor toekomstige websites, dus ik ben hier heel blij mee

Ook bedankt overigens voor al het andere advies!

[ Voor 4% gewijzigd door bekok op 15-09-2009 13:13 ]

[Da Weef]

Je hebt denk ik niet helemaal goed gelezen

You do not need to include IE7.js if you are using IE8.js

[bekok]

Da Weef schreef op dinsdag 15 september 2009 @ 13:48:
Je hebt denk ik niet helemaal goed gelezen


[...]

Ja klopt! Ik had het inderdaad al veranderd, alleen nog niet geupload