Rachanda
Webdesign


Body-Box Test

Een pagina begint met de body-tag, hierbij gaat het al fout, er zijn hierbij al (vermeende) verschillen in de IE-7 en Mozilla Firefox.

Als voorbeeld een body-box als volgt:

  • Een body met background-color= #FF0000 (rood)
  • En een border van 20 px breedte en de kleur blauw

De ShowBodyBox_1a.html ziet nu in IE7 en Firefox als volgt uit:

ShowBodyBox_1a: IE7 Firefox difference css test for the body box/tag

Het ziet ernaar uit dat IE-7 voor het content-vlak in elk geval als default waarde 'height' gebruikt:

  • height: 20px

Terwijl Firefox waarschijnlijk de volgende default waarde hanteerd:

  • height: 0px

Laten we eens de 'height' voor de body-box op '0 px' zetten en dan weer de body-box vergelijken in IE-7 en Firefox

Dit is gedaan in ShowBodyBox_1b.html, nu ziet het in IE7 en FireFox als volgt uit:

ShowBodyBox_1b: IE7 Firefox difference css test for the body box/tag

Nu is de hoogte van het content vlak in beide gevallen '0 px' en laten beide browsers de zelfde vorm zien.

Maar we zijn er nog niet, immers de positie van het blok is nog niet gelijk in beide browsers

Kennelijk is de default 'margin' in beide browsers verschillend zo te zien hanteerd IE-7:

  • top-margin van 15 px (en waarschijnlijk een bottom-margin van 15 px)
  • left-margin en right-margin van 10 px

Terwijl bij Firefox default magin's hanteerd als zijnde:

  • top-margin van ca. 8 px (en waarschijnlijk een bottom-margin van ca. 8 px)
  • left-margin en right-margin van ca. 8 px

We zetten de margin voor de body-tag eens op laten we zeggen 5 px

Dit is gedaan in ShowBodyBox_1c.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 ShowBodyBox_1c.html te kijken.

Bovenstaande situaties zijn een goed voorbeeld dat de fout gelegen is bij:

  • dan wel de web-designer
  • of de gebruikte webeditor,

het probleem lag in dit geval niet bij de browsers !

We gaan de body-box nog verder bekijken, door nu het content-vlak open te trekken.

Laten we het content vlak een hoogte geven van b.v. '60 px' door de height van '0 px' te veranderen in '60 px', zie ShowBodyBox_1d.html

Dit is in beide browsers het zelfde, dus een plaatje is niet nodig, gewoon naar ShowBodyBox_1d.html kijken is afdoende.

Dan kunnen we nog even kijken hoe de default padding staat in beide browsers, dit kunnen we bekijken door wat content in de body tag te plaatsen zie: ShowBodyBox_1e.html

Het ziet ernaar uit dat beide browser hier het zelfde reageren, zo te zien staat de default padding voor beide browsers op '0-px'

Tip: verander de breedte van het browser window een om te kijken hoe de content zich aanpast.

Het is nog intressant eens te onderzoeken of we de content kunnen begrenzen, zodat de tekst alleen in het content-vlak blijft en niet over de border heen gaat

Dit kan gedaan worden middels de toevoeging van 'overflow: hidden;' in de body-tag css-rule toe te voegen.

Dit is toegepast in ShowBodyBox_1f.html en zie daar...we hebben weer een verschil tussen IE-7 en Firefox te pakken. Het ziet in IE7 en FireFox als volgt uit:

ShowBodyBox_1f: IE7 Firefox difference css test for the body box/tag

Ik heb deze situatie (nog) niet nader onderzocht... het kan namelijk best zijn dat het gebruik van 'overflow: hidden;' niet de goede manier is om dit te bereiken. Het zou best kunnen zijn dat 'overflow: hidden;' alleen gebruikt mag worden als de css 'position: ' -rule toegepast wordt om maar wat te noemen.

Dit is een goed voorbeeld van de fout als eerste te zoeken bij de webdesigner... de fout zoeken in de volgorde webdesigner, web-editor, web-browser, w3w.

Wel ben ik voorzichtig geneigd IE-7 op dit 'overflow: hidden;' punt in het gelijk te stellen.

Het resultaat van dit body-tag onderzoek is:

  1. Dat het noodzakelijk is om de 'margin' in de body-tag css-rule te definieren, immers dan gedragen beide browsers zich gelijk.
  2. De 'height' rule, hoeft alleen maar gedefineerd te worden als 'n content-hoogte kleiner dan 10 px nodig is (Dit zal meestal niet het geval zijn)

We gaan door naar het onderzoeken/bekijken van de boxmodeltest

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)