Webtips

Box model hacks

Er zijn een aantal methodes om de bekende ‘box model hack’ in te voeren, u weet wel de truc om Internet Explorer valse waarden te voeren, en toch de juiste door te geven aan browsers die wel hun best doen.
De eerste waar we op in gaan is de
Escaped character methode
De naam is wat het doet: een \ (escape) zorgt ervoor dat IE over de regel heenkijkt en pas weer bij de volgende selector begint te lezen. Andere browsers hebben geen last van de \ en interpreteren gewoon de laatste regel:

p {
        width: 200px;
        margin-left: 20px;
}
* html p {
        width: 200px;
        \width: 220px;
        w\idth: 200px;
}

De tweede methode is Alternate Box Model Hack. Dit is een vereenvoudiging van de eerste methode die er op neer komt dat de laatste regel gewoon wordt weggelaten. Werkt ook.

p {
        width: 200px;
        margin-left: 20px;
}
* html p {
        width: 220px;
        w\idth: 200px;
}

Dan is er een manier die wat minder net is (maar geen hacks nodig heeft): ‘Div’ities’, die inhoudt dat we in één div de breedte en hoogte aangeven, en in een andere padding (‘bladvulling’ zou ik moeten schrijven, maar begrijpt u het dan?) en marge. Als volgt:

#div1 { float: left; width: 300px; }
.innerdiv { padding: 10px; }

Het bepalen van marge en padding kan natuurlijk direct op een element (bijvoorbeeld een paragraaf) dat in die div zit, zonder een aparte div te maken:

#div { float: left; width: 300px; }
p { padding: 10px; }