[css] ie abolute layer 100% van parent

[Verwijderd]

Goed, ik wil een meerekkende transparante div achter een tekst layer zonder dat de tekst ook transparant wordt. Op zich niet een groot probleem, mits je mozilla/firebird gebruikt (open deze link met moz/firebird : http://www.takkie.nl/test.html).

Nu komt mijn probleem: IE schijnt een absoluut gepositioneerde layer (opera trouwens ook) niet even hoog te kunnen maken als zijn parent . Daarnaast neemt de div de margin van een div ernaast over!? Open de link maar eens in internet explorer en 'ervaar' het verschil. Heeft iemand enig idee hoe ik dit op kan lossen? Liefst CSS eventueel met een behavior filetje...

[Verwijderd]

Voor hetzelfde resultaat als in Mozilla kan je net zo goed die 'transparante' div de kleur geven die ie nu heeft (#4B669D) en non-transparent maken aangezien de tekst/inhoud boven die layer zit en niet eronder. Omdat de tekst erboven zit zie je volgens mij helemaal niet van die transparantie of wel?

Je kan waarschijnlijk ook beter padding gebruiken in plaats van margin om ditzelfde effect te bereiken vanwege verschillen in het box-model van IE en Gecko-gebaseerde browsers.

En waarom niet alles relatief houden?

[Verwijderd]

o.k. heb inmiddels een achtergrondplaatje toegevoegd, had deze reactie al min of meer verwacht (nofi) Het idee is dus dat de achtergrond een willekeurig plaatje is en dat de transparante layer meegroeit met de tekst. Non-transparant zou dus wel kunnen, maar dan moet je voor iedere mogelijke achtergrond ook een lichtere versie maken, wat niet echt generiek/bandbreedte besparend is.

Die margin en padding maken niets uit, het document is xhtml valid dus ie doet zijn box-model ook goed (oh ja, ja! ) Zolang je doctype declaratie op het eerste teken van je document begint en je geen xml declaratie toevoegd hanteert IE gewoon de strict regels voor xhtml.

Waarom niet relatief? Hoe wil je de tekst boven de transparante layer krijgen zonder dat de tekst ook transparant blijft?

Zoals je ziet heb ik helaas al wat tijd gehad om over het probleem na te denken

[Verwijderd]

Ik heb nog nooit met transparante divs gewerkt, laat ik eens wat gaan testen...

[Verwijderd]

Volgens mij heb ik iets gevonden...

Cascading Stylesheet:

div#filter * {
  position: relative;
}

En dan kan je dus alles relatief zetten en de divs nesten.

Zie http://www.domedia.org/oveklykken/css-transparency.php

edit:
Werkt niet in Mozilla zie ik nu...

[ Voor 11% gewijzigd door Verwijderd op 18-06-2004 15:46 . Reden: te snel ]

[Verwijderd]

Zou ook wel bizar geweest zijn als dat had gewerkt; er staat namelijk niets genest in de div #filter

Waar ik me vooral over verbaas is dat IE op zich goed omgaat met een 100% waarde voor width en/of height zolang het niet position:absolute is, maar zodra dat dus veranderd alleen de breedte aangepast wordt aan de parent. Ik zou verwachten: of de width en de height allebei niet aanpasen aan de parent, of allebei wel, maar niet één van de twee...

[slm]

Waarom zet je de 30/0.3 opacity codes niet in de container en dan een 100/1.0 opacity in de content div?

[Verwijderd]

Verwijderd schreef op 18 juni 2004 @ 16:09:
Zou ook wel bizar geweest zijn als dat had gewerkt; er staat namelijk niets genest in de div #filter

Nee, ik bedoelde ook dat je dan die divs eerst moest nesten, grapjas. Maar dat werkt dus in IE, maar in Mozilla weer niet...

slm schreef op 18 juni 2004 @ 16:22:
Waarom zet je de 30/0.3 opacity codes niet in de container en dan een 100/1.0 opacity in de content div?

Werkt niet. De opacity wordt leuk 'geërft' (vrij vertaald ) door alle geneste elementen...

[slm]

Heb je het getest? Bij mij werkt het gewoon in IE/Moz als je die opacity weer goed zet in de content layer.

[Verwijderd]

Verwijderd schreef op 18 juni 2004 @ 16:42:
[...]
Nee, ik bedoelde ook dat je dan die divs eerst moest nesten, grapjas. Maar dat werkt dus in IE, maar in Mozilla weer niet...

Dat moet je ff uitleggen, hoe kan ik ze nesten zonder dat alles transparant wordt? (zie je eigen tekst hieronder )

Werkt niet. De opacity wordt leuk 'geërft' (vrij vertaald ) door alle geneste elementen...

slm schreef op 18 juni 2004 @ 16:47:
Heb je het getest? Bij mij werkt het gewoon in IE/Moz als je die opacity weer goed zet in de content layer.

Heb ik getest, exact zoals jij zei, maar het effect van 100% maal 30% (dat is wat je eigenlijk tegen je browser zegt) blijft nogsteeds 30% en niet opeens 100%. Dat is het verneukeratieven van opacity rules...

[ Voor 32% gewijzigd door Verwijderd op 18-06-2004 16:51 ]

[slm]

Dan vraag ik me af waarom het er bij mij wél goed uitziet. Bovendien kan je volgens mij ook nog eens de opacity in de content div op 333% zetten.

[Verwijderd]

slm schreef op 18 juni 2004 @ 16:54:
Dan vraag ik me af waarom het er bij mij wél goed uitziet. Bovendien kan je volgens mij ook nog eens de opacity in de content div op 333% zetten.

Dat komt zeer waarschijnlijk doordat je niet goed leest wat ik typte... Bekijk je pagina maar eens in Mozilla...

[slm]

Die (moz 1.4) ziet er bij mij dus identiek uit als in IE (6)..... (?)

[Verwijderd]

slm schreef op 18 juni 2004 @ 17:13:
Die (moz 1.4) ziet er bij mij dus identiek uit als in IE (6)..... (?)

In Mozilla 1.6 is de tekst net zo transparant als de #filter div.

[Verwijderd]

Ik kreeg opeens een ingeving!
Als iets alleen in IE werkt en iets anders alleen in niet-IE... dan kan je je stylesheet zo ranzig maken dat het allebei geldt... zie hier: http://www.takkie.nl/test2.html

[slm]

Verwijderd schreef op 18 juni 2004 @ 17:29:
[...]


In Mozilla 1.6 is de tekst net zo transparant als de #filter div.

aha toch maar weer eens een nieuwe versie downloaden dan.