Box model

Mark — Thu, 06 Nov 2008 00:13:50 +0000

Browsers die de CSS box model verkeerd verstaan plaatsen de border en padding atributen binnenin de effectieve breedte. Dit geeft verwarring bijvoorbeeld met Internet Explorer 6 en Internet Explorer 5.

Standaard voorbeeld

div.boxtest {
border:20px solid;
padding:30px;
background: #ffc;
width:300px;
}

Volgens de regels zou dit nu een box moeten zijn van 400 px breed = 20+30+300+30+20 = 400

Internet Explorer 6 zal deze CSS niet juist begrijpen en plaatst de 20px boord (x2) en de 30px padding (x2) binnenin de actuele width van 300px, wat als resultaat heeft dat de width nu nog maar 200px breed is = 300-20-30-30-20 = 200!!

Oplossing

Om dit op te lossen moeten we Internet Explorer iets gaan wijsmaken, namelijk dat de box eigenlijk 400px breed moet zijn (dus met border en padding 300+20+30+20+30), en daarnaa geven we de echte waarde voor alle andere browsers die wel correct met de box model kunnen omgaan.

Zo zouden we het doen voor moderne browsers:

div.content {
border:20px solid;
padding:30px;
background: #ffc;
width:300px;
}

Dan leiden we Internet Explorer 6 om de tuin door eerste de foutieve waarde op te geven (400) en sluiten zogezegd af met “\”}\””, en daarna geven we de echte waarde op (daar het toch de regel is dat de 2de bepaling de 1ste overruled) :

div.content {
border:20px solid;
padding:30px;
background: #ffc;
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}

Resultaat:

Crossbrowser en valide CSS!

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Css Snippets » Xhtml Transitional

HTML5 doctype

HTML 4 strict

XHTML 1 Strict

HTML5

CSS include

CSS

Strikethru

HTML

CSS

Box model

Standaard voorbeeld

Oplossing