Hehe ... så let slipper du zq ikke! ;D
Mit succeskriterie er ikke lidt points oveni statistikken, men at få dig til at skrive nogen sider, du bliver glad for - og nogen, vi andre ikke vil brokke os over. Det er helt rigtigt, du altid skal bruge enheder på dine værdier (undtagen på værdien 0), men der er lige nogle andre ting, jeg gerne ville have dig til at forstå ... bær venligst over med mig ;o)
Et HTML-dokument skal altid påbegyndes med en DTD (DocType Definition). Den fortæller browseren, hvad det er for et dokument, den skal til at behandle - og i hvilken HTML-version, det er skrevet. Mere om DTD'er om lidt.
I CSS opererer man med noget, man kalder box-modellen. Det er de regler, der bl.a. beskriver, hvordan og hvor browseren skal anbringe f.eks. border, margin og padding.
Den generelle regel siger, at bredden af disse altid skal lægges til elementets dimensioner. Det betyder, at et div, der får følgende styles sat, reelt er 102px højt og bredt (bredden plus to gange borderWidth - og det samme med højden):
style="width:100px;height:100px;border:1px solid red"
Sådan har IE bare ikke gjort tidligere, hvilket har givet tonsvis af problemer med komplet forskellige stylesheets til forskellige browsere. IE har nemlig lagt borderen indenfor elementets bredde og højde.
Derfor valgte MS - med udgivelsen af IE6.0 - at give muligheden for at få IE til at opføre sig i henhold til standarden. Det gøres ved at inkludere definitions-URL'en i DTD'en:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">- definitions-URL'en er det, der står mellem det sidste sæt gåseøjne. Når IE ser den, ved den, at den skal opføre sig, som CSS-standarden foreskriver.
Her er tre eksempler, du kan prøve i både FF og IE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITLE</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: yellow;
}
.gnu {
border: 50px solid red;
}
</style>
</head>
<body>
<div class="gnu">HejHep, du</div>
<div>HejHep, du</div>
</body>
</html>
- og:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITLE</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: yellow;
}
.gnu {
border: 50px solid red;
}
</style>
</head>
<body>
<div class="gnu">HejHep, du</div>
<div>HejHep, du</div>
</body>
</html>
- og:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITLE</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: yellow;
}
.gnu {
border: 50px solid red;
}
</style>
</head>
<body>
<div class="gnu">HejHep, du</div>
<div>HejHep, du</div>
</body>
</html>
Som du ser, tolker FF dem alle ens - og korrekt ifølge CSS. IE tolker derimod kun det første korrekt.
Det er også meget vigtigt, der ikke står andet før DTD'en! Dette fejler således også i IE:
<!-- Bare en squide kommentar smadrer CSS i IE :o| -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITLE</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: yellow;
}
.gnu {
border: 50px solid red;
}
</style>
</head>
<body>
<div class="gnu">HejHep, du</div>
<div>HejHep, du</div>
</body>
</html>
... _så_ kan jeg forsvare at lægge et svar ;o)
