(div) Box-Model Test
Voor het opbouwen van een css gebaseerde web-page-layout speelt de div-box een belangrijke rol. Een div-box kan tot leven geroepen worden middels gebruik van een div-tag. Hier volgt een onderzoekje naar het gedrag van zo'n div-box.
We gebruiken hier als voorbeeld een div-box met de eigenschappen:
- een content-vlak ter grootte: hoogte x breedte van 200x200 px
- padding van 30 px breedte rond de content
- een border van 20 px breedte rond de padding en content
Deze situatie is verwerkt in ShowBoxModel_1a.html
Er is een verschillend resultaat te zien in IE7 en Mozilla-Firefox:
Het verschil bestaat uit een andere positie van de div-box in beide browsers
In de bodyboxtest is gebleken dat het noodzakelijk is voor de positie van de body-box om de 'margin' van de body tag te definieren. Dat is in ShowBoxModel_1a.html nog niet gedaan.
Het is van belang dit te doen omdat een div-box binnen de body-box ligt. Op dit moment is namelijk niet duidelijk of het positie verschil van de div-box te wijten is aan:
- de div-tag rules
- de body-tag rules
- de div-tag en body-tag rules samen
We kunnen de invloed van de body tag weghalen door de margin: 0px; rule in de body-tag te definieren. Dit is gedaan in ShowBoxModel_1b.html
Nu zijn de resultaten in beide browsers gelijk, daarom is het nu niet nodig een plaatje te laten zien, immers het resultaat is te zien door naar ShowBoxModel_1b.html te kijken.
Door het definieren van de 'margin:0px' voor de body is tevens de margin voor de div box ook als 0px gedefinieerd omdat de div-box de margin van de 'parent' (de body-tag), 'inherits'.
Nu gaan we de border van de div box eens transparant maken... dit kan gedaan worden door de 'border-color: transparent;' rule toe te voegen voor de div-tag.
Dit is gedaan in ShowBoxModel_1c.html
(Opmerking: de 'border-color: transparent;' wordt nog niet ondersteund in IE6 en eerder.)
Hier hebben we weer een verschil tussen de browsers te pakken:
Het verschil zit in het groene achtergrond vlak:
Nu hoeft dit verschil geen probleem te zijn, immers het transparant maken van de border zal normaal gesproken niet gedaan worden.
Wel reist nu de vraag hoe een achtergrond-plaatje van het content-vlak behandeld wordt, immers dit is wel van belang:
Stel maar eens dat Firefox een achtergrond plaatje laat beginnen van de linker-bovenhoek van de border buitenkant, en dat IE-7 een achtergrond plaatje laat beginnen van de linker-bovenhoek van padding-buitenkant (de border binnenkant), dan zou dat betekenen dat een achtergrond plaatje niet goed geplaatst kan worden (alleen indien de border 0px breed is zou het dan goed gaan)
Eens kijken wat er gebeurt als we een achtergrond plaatje toevoegen, dit is gedaan in ShowBoxModel_1d.html
Als achtergrond plaatje is een zwart vlak genomen ter groote van 200x600px, dit om te kijken wat er met de achtergrond gebeurd als die langer is dan het content vlak.
Het resultaat hiervan ziet in de browsers als volgt uit:
Ik ben van mening dat IE-7 wederom de boel beter behandelt dan Firefox, immers bij Firefox begint het achtergrond plaatje vanuit de linkerboven hoek van de padding rand rond het content-vlak en strekt zich naar beneden uit tot de onderkant van de border-rand (dus niet tot de onderkant van de padding-rand !!). (Dit zal dan waarschijnlijk ook gebeuren aan de rechter kant in geval het achtergrond plaatje breeder zou zijn geweest).
Bij IE-7 begint het achtergrond plaatje vanuit de linkerboven hoek van de padding rand rond het content-vlak en strekt zich naar beneden uit tot de onderkant van de padding-rand, hetgeen logischer is, tevens wordt de achtergrond-kleur en het achtergrond-plaatje voor het content-vlak in IE-7 op de zelfde manier behandelt, hetgeen wederom logischer is om te doen.
Opmerking: Het bekijken/uitzoeken van:
of en hoe de w3w dit effect beschrijft dan wel bedoeld heeft heb ik (nog) niet bekeken.
Vervolgens is het intressant te kijken wat er gebeurd als we 'overflow: hidden;' toevoegen voor de div-tag
Dit is uitgevoerd in ShowBoxModel_1e.html
Het resultaat hiervan ziet in de browsers als volgt uit:
Beide browsers klippen de content aan de onderkant van de padding rand (niet aan de onderkant van het content vlak)
Nu ligt het voor de hand eens te kijken naar het resultaat als de border niet meer als transparant ingesteld wordt.
Dit is uitgevoerd in ShowBoxModel_1f.html
Nu zijn de resultaten in beide browsers gelijk, daarom is het nu niet nodig een plaatje te laten zien, immers het resultaat is te zien door naar ShowBoxModel_1f.html te kijken.
Dit zijn voorloping de css onderzoekjes, U kunt terug naar resultaatverschillen
Uw reactie op bovenstaande items wordt zeer op prijsgesteld. Mogelijk leiden uw opmerkingen tot een nog gedetailleerder inzicht van deze materie.
Als u iets kunt toevoegen dan wel verbeteren aan deze pagina dan wordt uw commentaar in deze pagina opgenomen.
Daarom gaarne Uw reactie(s)