Iedere webmaster die zijn site weleens in Internet Explorer en FireFox heeft bekeken, zal ongetwijfeld verschillen hebben gezien tussen beide browsers. Hoe komt dit en hoe lossen we het op?

De HTML/CSS-syntax wordt beheerd door W3C, een organisatie waar veel bedrijven en organisaties lid van zijn. De W3C is echter geen internetpolitie die controleert of de richtlijnen toegepast worden.

Softwareproducenten die browsers maken proberen zo goed mogelijk aan te sluiten bij de richtlijnen van de W3C, maar zullen daarin niet altijd slagen. Ook willen sommige producten opties inbouwen die nog niet zijn goedgekeurd door de W3C, dit kan later problemen opleveren als bestaande functies afwijken van nieuwe richtlijnen.

Webmasters die niet coderen volgens de W3C-richtlijnen zullen beslist tegen problemen aanlopen als hun site op verschillende browsers bekeken wordt. Webmasters die veel naar een hack grijpen om zaken (o.a. browsercompatibiliteit) voor elkaar te krijgen, lopen vroeg of laat een keer tegen de lamp; bij het verschijnen van nieuwe browsers kunnen hacks heel verkeerd uitpakken.

Een voorbeeld: hieronder staan twee schermafbeeldingen die genomen zijn van een pagina in respectievelijk FireFox en Internet Explorer 7.

De kopregel is een gewone < h1 > die binnen een kader gezet is. Wat meteen opvalt is dat de marges boven en onder de titel behoorlijk afwijken. Ook het lettertype en grootte wijken behoorlijk af. Elke browser heeft zijn eigen standaard instellingen.

De vakken eronder hebben allemaal een kader van 4 pixels, een padding (afstand tussen kader en inhoud) van 6px en een rechtermarge van 10px. De brede groene vakken hebben een width (breedte) van 195px en de smalle vakken een width van 120px. De W3C stelt dat 'width' de binnenmaat is van een block; de padding, border en marge vallen daar buiten. Internet Explorer pakt de marge, border en padding aan de binnenkant van de 'width', wat eigenlijk logischer is, maar niet volgens de gemaakte afspraken. Door de juiste 'doctype' (zie Web Succes Magazine 113) bovenaan een html-document te zetten, gedragen Internet Explorer 6 en 7 zich volgens de regels.

Vooral lettertypes, lettergrootte, regelafstanden, marges en paddings kunnen behoorlijk afwijken van browser tot browser. Sommige elementen zijn hier bijzonder gevoelig voor, zoals: h1, p, ul en ol. Wees daarom zorgvuldig en (her-)definieer alle eigenschappen die van invloed kunnen zijn op je vormgeving.

Vergeet nooit je site in meerdere browsers te controleren: Minimaal IE6, IE7 en FireFox.

links:
http://www.w3.org/
http://www.w3.org/Consortium/Member/List
http://www.alphamegahosting.com/wsm113.html#2.