Jaha, så är det dags för NS att dansa bugg igen. Om jag har en div där jag sätter bredden till 200px och sedan har en padding-left som jag sätter till 100px så blir bredden padding PLUS width, alltså 300px! Är det så här sjukt, eller har jag missat något? Finns det en lösning? Vill alltså ha en div med en fast bredd och en text i denna som ligger ett antal pixlar från vänsterkanten (med padding).
Nej, bara jag får rätt bredd på diven och indrag på texten inne i diven. I just detta fall kan jag visserligen använda en tabell, då funkar det. Men jag har även en dropdownmeny med divar och där kan jag inte byta ut divarna... där har jag även problem att få texten rätt "vertikalt"... om jag har padding top så ökar även divens höjd. :(
NN gör "rätt" (dvs enligt standard!)
Men du kan (om du väljer doctypen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
och skriver kod som validerar mot den på W3C, räkna med att du får samma beteende även i MSIE!.
Kör du med den <DOCTYPE:n kan du sätt en fast bredd genom att fördela bredden mellan padding-left och width och sätta övriga margin-, padding- och border- värden till 0.
Exempel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<style type="text/css">
<!--
div {padding:0; margin:0; border: 1px solid navy;} /* nollställ allt som default! */
-->
</style>
</head>
<body>
<div style="width:300px">Referensbredd (0 + 300 = 300 bred) </div>
<div style="padding-left:100px;width:200px">Indrag (100+200 = 300 bred)</div>
</body>
</html>
Notera dock att det bara är HTML4-Strict (och xhtml 1 Strict)som f.n. ger samma beteendei samtliga (moderna) webbläsare enligt hsivonen