[CSS] Div wordt wit ipv goed gedisplayed in Mozilla

[BCC]

Is er iemand die weet waarom deze

http://www.wbm.nl/contact.asp

pagina niet goed wordt gedisplayed in Mozilla? Van de laatste 2 Divs op deze pagina (kaartje en het verhaaltje) worden ongeveer de bovenste 10 pixels wel geshowed en de rest niet. Wie weet hoe ik dit moet oplossen?

[rickmans]

Het ligt o.a. aan je class page

als deze al zo is:

code:

.page
{
    width: 760px;
    left: 50%;
background-color: #FFFFFF;

}

Dan ziet het er beter uit, voor een centrering kan je overigens hier kijken:
http://www.thenoodleincid...als/box_lesson/boxes.html

[faabman]

mmm, volgens mij is de center - methode die je gebruikt wel oké... wanneer je je .page deze meegeeft is het bij mij (firebird) opgelost

Cascading Stylesheet:

.page
{
display:block;
position:absolute;
    width: 760px;
    left: 50%;
    margin-left: -380px;
    background-color: #FFFFFF;
}

[BCC]

Waarom gaat het daarboven wel goed dan?

Maar als ik position: absolute doe, dan gaat het nooit meer goed komen met de rest van mijn pagina natuurlijk...

[ Voor 99% gewijzigd door BCC op 24-02-2004 21:53 ]

[faabman]

BCC schreef op 24 februari 2004 @ 21:44:
Waarom gaat het daarboven wel goed dan?

Maar als ik position: absolute doe, dan gaat het nooit meer goed komen met de rest van mijn pagina natuurlijk...

waarom niet??? je past die :absolute toch gewoon toe op de container van je hele site?? alles wat daar binnen valt valt daar binnen....

[BCC]

FvKnijff schreef op 24 februari 2004 @ 21:55:
[...]


waarom niet??? je past die :absolute toch gewoon toe op de container van je hele site?? alles wat daar binnen valt valt daar binnen....

Niet als je je DIVjes er buiten zet Ik zal het eens even aanpassen..

[BCC]

Ok.. het werkt nu.. kan iemand mij nu ook uitleggen waarom dit nu wel werkt?

[BCC]

KICK?

[r0bert]

Ik heb ook een "probleempje" met Mozilla/IE

Ik heb een pagina gemaakt, zie hier. Hij ziet er in IE en Mozilla heel verschillend uit. Dat gebeurt wel vaker, maar ik heb echt geen enkel idee waar het aan kan liggen! Ik bedoel, ik heb de breedtes aangegeven in pixel, die zijn toch bij beiden even groot!? Ik kan bedenken dat het misschien iets met boxmodel of margin/padding te maken heeft.. Maar waar? En hoe los ik dit op

_{(let bijv vooral op de breedte van de oranje balk aan de rechts van de navigatie en de witte tussenruimte daar rechts naast)}

[crisp]

@BCC: alles wat je absoluut positioneert haal je uit de flow; op het moment dat je parent geen height heeft, en het een element is waarvoor de overflow niet expliciet op visible staat (zoals de body), dan vallen er dus delen weg.

@r0bert: probeer eens padding-box, of probeer het boxmodel zo veel mogelijk te omzeilen (door enkel padding te gebruiken bij elementen waarvoor je geen expliciete width/height hoeft op te geven)

[Verwijderd]

Ik ben een beetje bezig geweest met het oorspronkelijke probleem van BCC.
Ik heb een paar testcases gemaakt:
http://home.hccnet.nl/m.w...tack%20level%20testcases/
De vraag die ik hierbij stel is:
Moet de groene div boven of onder de gefloate gele div zijn?

Dit zijn de resultaten in Opera7.23 en Mozilla(build 20040219 Firefox/0.8.0+):

div_green_position_static.xhtml:
Moz: groene div achter gele div
Op7: groene div achter gele div

div_green_position_relative.xhtml: ] Dit is de oorspr. probleem van BCC. IE deed
Moz: groene div voor gele div ] het vanwege hele andere (foute) reden
Op7: groene div achter gele div ] goed bij hem.

div_green_position_absolute.xhtml:
Moz: groene div voor gele div
Op7: groene div voor gele div

div_green_position_fixed.xhtml:
Moz:groene div voor gele div
Op7: groene div voor gele div

Dit is de spec die zou moeten beslissen wat er moet gebeuren:
Zie ook: http://www.w3.org/TR/CSS21/visuren.html#z-index

Ik denk (maar weet niet zeker) dat de groene div eigenlijk in alle gevallen achter de gele div zou moeten zitten.

In principe hebben elementen die later in de document tree moeten voorkomen (groene div) wel een hogere stack level, maar dieper geneste elementen (gele div) krijgen ook een hogere stack level en wel een die hoger is dan elementen die later in de document tree voorkomen (tenzij die ook dieper genest is). --> Het punt bij dit is alleen dat ik dit niet echt in de spec terug kan vinden.
Dit lijkt wel het gedrag te zijn van Opera en Mozilla, zie:
http://home.hccnet.nl/m.w...red_position_static.xhtml

Ik krijg het idee dat Mozilla in position relative,absolute en fixed een nieuwe stacking context creeert (onterecht), waardoor de groene div over de gele div gaat.
Opera doet dit alleen in het position absolute en fixed geval.

Wat denken jullie? Zit ik er helemaal naast?

edit:

Ok, achteraf gezien zit Mozilla goed en Opera fout in dit ene geval.
Ik dacht de hele tijd dat dieper geneste elementen ook een rol speelden in de stacking level, maar dat is niet zo.
Dit is ook handig om een en ander te begrijpen:
http://www.w3.org/TR/2004/CR-CSS21-20040225/zindex.html

[ Voor 8% gewijzigd door Verwijderd op 27-02-2004 11:30 ]

[r0bert]

crisp schreef op 25 februari 2004 @ 22:51:
@r0bert: probeer eens padding-box, of probeer het boxmodel zo veel mogelijk te omzeilen (door enkel padding te gebruiken bij elementen waarvoor je geen expliciete width/height hoeft op te geven)

Padding-box wordt wel iets beter, maar nog niet goed.. Ik zal wel even een nieuw topic voor mijn eigen probleem openen want anders ga ik door het probleem van de topicstarter heen blaten en dat is nogal verwarrend