[css] boxmodel gedonder en aanpakproblemen

[Verwijderd]

meeste mensen weten wel dat ie het css boxmodel verkeerd interpreteerd, wat wel gefixed is sinds versie 6.zoveel, mits maar nog steeds suf afhankelijk van je doctype.

Als je bijvoorbeeld een xhtml transitional (of strict, boeit niet) document begint met <?xml version="1.0" encoding="iso-8859-1"?>, doet ie het weer niet goed.

Ondertussen weten we hier wel redelijk omheen te werken met trucjes als hier beschreven: http://www.glish.com/css/hacks.asp

(dit effe ter info van mensen die hiermee zitten te worstelen) Ik ga nu uit van het w3c boxmodel dus width = content width van het element, als je daarbij padding, border optelt krijg je de breedte die met this.offsetWidth op te vragen valt (nou weet ik effe niet zeker of de margin er ook bij moet, niet toch?) Backgrounds horen tot de buitenrand van de border te lopen (alleen ie doet dit goed)

Waar ik nu tegenaanloop is bijvoorbeeld het volgende probleem
• een div met rondom een marge van 50 px, border van 10px en verder de pagina vullend. In het foute ie boxmodel was dit gewoon van je element width en height op 100% zetten, dat werkt nu niet omdat je dan breder uitkomt dan je venster. Ik wil dus van buiten naar binnen een hierarchie creeren, maar dat lukt alleen maar via onresize javascript gepruts volgens mij

vervolgens lijken hoogtes ook een probleem. height: 50px doet ie wel, 50% niet (dit komt natuurlijk doordat het parentelement, de body geen hoogte heeft (tenminste die staat op auto) de hoogte van de body een waarde geven werkt, maar als je die op 100% zet krijg je meteen scrollbars vanwege de padding van je body, je boxheight wordt dan groter dan je scherm)

met het fouteboxmodel van ie gaat dit allemaal zoals bedoelt. volgende css illustreert de boel:

PHP:

body {
    margin: 0px;
    padding: 50px;
    height: 100%;
}
div {
    border: 10px solid black;
}
div.container1 {
    width: 100%;
    height: 50%;    
}
div.container2 {
    width: 100%;
    height: 50px;
    margin: 0px;    
}

container 1 heeft alleen een hoogte als je de body een hoogte geeft (voor breedte gaat dit erhaal overigens weer niet op, zouden hoogte en breedte niet equivalent moeten zijn?), maar body een hoogte geven levert scrollbars. Bovendien zijn beide containers breder dan bedoelt, logisch, maar hoe los ik het op?

eigenlijk zou je van die procenten enkele pixels af moeten kunnen trekken ofzo, hoe is zoiets nou op te lossen? Want ik raak zo weer snel geneigd tabellen te gaan gebruiken.

vragen zijn dus:
• welke browser doet wat goed volgens de (w3c) regels
• hoe krijg ik wat ik wil, nl een meeschalende div, lijkt alleen te werken met het foute boxmodel

[Hangloozz]

werp zeer zeker even een blik op de site van PPK..

[Verwijderd]

sorry dat ik effe moet lachen om die gast, z'n doos voorbeeld snijd niet echt hout vind ik, als je een doos hebt met een pierpschuim padding erin en je vraagt hoe groot ie is dan wil je toch de binnenmaat weten want anders past je content er dalijk niet in, tenzij e als vervoersbedrijf wilt weten hoeveel dozen er naast elkaar in je vrachtwagen kunnen.

Wat ik dus bedoel is dat beide boxmodels handig zijn en dat ik persoonlijk liever een content-width en een box-width property dan dat ellendeige geswitch met models.

En die site bevat idd geen doctype, zoals ie al zegt, da's imho redelijk stom, want dan weet je browser helemaal niet wat ie moet en heb e zeker kans op inconsistentie door de versies heen.

Ik wil me graag aan w3c houden, dus de vraag blijft of er een w3c oplossing voor mijn probleem is, anders wordt het idd switchen met models (rilt bij de gedachte)

[Hangloozz]

nou ja, het was maar een suggestie hoor
Hij staat redelijk hoog aangeschreven bij mijn weten..

je krijg nog 1 linkje van me en dan moet je opzouten..

[Verwijderd]

die heb ik ook al gezien ja, ik ben wel op de hoogte van de verschillende boxmodels, van die hack (zie link in m'n eerste post) en ondertussen ook van die boxmodelswitch voor moz opera7 en ie5/mac.

Maar ben ik nou stom als ik blijf volhouden aan w3c te willen voldoen? dus ie6 op w3c model te zetten door xhtml doctype maar ?xml prefix weglaten, voor ie5.x die hack toepassen, voor moz de switch aanzetten en voor netscape de fout accepteren en er vervolgens dus niet uitkomen hoe ik mijn probleem moet oplossen (w3c heeft toch wel nagedacht over hun boxmodel neem ik aan)

't strijkt me gewoon tegen de haren om het ie boxmodel te handhaven puur omdat dat in dit geval beter uitkomt

_{inside: eens een lul...}

[Verwijderd]

Verwijderd schreef op 30 January 2003 @ 14:09:
't strijkt me gewoon tegen de haren om het ie boxmodel te handhaven puur omdat dat in dit geval beter uitkomt

Maar dat begrijp ik niet. Daar zijn toch juist de verschillende box-models voor? Omdat in je verschillende situaties op verschillende manieren met breedtes en hoogtes om wil gaan?

hoe krijg ik wat ik wil, nl een meeschalende div, lijkt alleen te werken met het foute boxmodel

Er is niet zoiets als het 'foute' model. Elk model is even valide denk ik toch.

Wat je waarschijnlijk bedoelt is dat default het model op content-box zou moeten staan (zoals in Mozilla) maar dat in IE standaard border-box is geimplementeerd. Dit is erg eenvoudig op te lossen. Voeg

code:

box-sizing: border-box;
-moz-box-sizing: border-box;

toe aan de betreffende componenten en je bent zowel standards compatible en je hebt het gedrag wat je zoekt in alle standards compatible browsers...

[ Voor 3% gewijzigd door Verwijderd op 30-01-2003 14:52 ]

[Verwijderd]

effe twee linkje en wat concrete problemen waar ik gek van wordt
bordermodel
contentmodel
(effe alleen voor ie)

• de zwarte layer heeft een heigth van 100%; bordermodel doet zoals ik wil, contentmodel doet niks met de % hoogte, als ik er een aantal px van maakt pakt ie het wel

• de blauwe layers moeten een vaste hoogte hebben, de rode moet de rest opvullen. dit krijg ik horizontaal wel voor elkaar, maar vertcaal niet. iemand een idee hoe ik dit voor elkaar kan boxen?

• de groene layers moeten naast elkaar in de rode komen, dus horizontaal iets van 30% en verticaal uitvullend in het contentmodel willen inline layers geen breedte en geen hoogte hebben, maar hoe krijg ik ze anders naast elkaar?

als ik dit opgelost heb heb ik wel het idee dat ik de css wereld begrijp, nu is het voor mij nog een vervelend onlogisch geheel dat af en toe beter met tabellen opgelost kan worden.