Padding en margin en het box probleem
Heel veel mensen komen aan met het probleem dat hun website in Mozilla Firefox goed is, maar in Internet explorer kloppen de maten niet meer, of juist andersom. Heel vaak maakt men in dit geval gebruik van margins en paddings. Waarom deze verschillen er zijn, en hoe je ze kan oplossen, wordt in dit artikel uitgelegd.
Zoals je ziet zijn er drie voorbeelden. Een voorbeeld is met html en css geprogrameerd, een is een screenshot over hoe het uitziet in Mozilla Firefox, en is een screenshot van hoe het eruit ziet in internet explorer. In dit voorbeeld willen we het resultaat berijken van hoe het in Mozilla Firefox eruit ziet. Wanneer je de muis op een voorbeeld houdt dan zie je waarbij dat voorbeeld hoort. Het beste is om dit artikel in beide browsers te bezichtigen.
Om even meer duidelijkheid te geven, leg ik uit hoe de voorbeelden in elkaar zitten. Aangezien een padding absoluut geen kleur kan hebben heb ik even een klein truukje uitgehaald, door de achtergrond een kleur te geven en vervolgens nog een div erbinnen te zetten met ook een kleur.
Elk voorbeeld bestaat uit:
– een witte achtergrond kleur
– een grijze padding van aan alle kanten 20 pixels breed
– een zwarte border van aan alle kanten 30 pixels breed
– een breedte van 230 pixels.
Voorbeeld 1:
Voorbeeld 2:
Voorbeeld 3:
– Kijk je in Firefox dan is voorbeeld 1 gelijk aan voorbeeld 3, en is het dus goed.
– Kijk je in Internet Explorer dan is voorbeeld 1 gelijk aan voorbeeld 2, en is het dus fout.
Wat gaat er nu mis?
Om dit uit te leggen moeten we denken als een browser. Ik zal hiervoor dus per browser uitleggen hoe deze “denkt”.
Internet explorer:
Hierbij kan je deze formule nemen: content = totale_breedte – border – padding
Ingevuld krijg je dan: content = 230 – 30 – 20 = 180 pixels
Dit betekend dus dat het voorbeeld nog steeds 230 pixels breed is, maar het tekstvlak maar 180 pixels.
Firefox Hierbij kan je deze formule nemen: totale_breedte = content + border + padding
Ingevuld krijg je dan: totale_breedte = 230 + 30 + 20 = 280 pixels
Je ziet dus dat internet explorer de 230 pixels gebruikt als de totale breedte, en Firefox de 230 pixels gebruikt voor het tekstvlak (content).
De oplossing:
Gebruik hiervoor een doctype.
Het doctype is een eis dat X(HT)ML stelt aan alle documenten die in deze taal geschreven worden. In feite zijn het de vastgestelde regels voor de syntaxis van je document. Oftewel, hierin wordt vastgelegd welke opdracht welke tag moet uitvoeren.
Een doctype ziet er ongeveer zo uit:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Alle CSS elementen
