---

I min jagt på at skrotte mine tabeller til fordel for CSS fandt
jeg denne side - som virkelig gav mig blod på tanden.

Jeg er nu blevet meget mere opmærksom på ting som jeg før ikke
var - såsom doctyper og browserkompatibilitet.

Derfor har jeg besluttet, at jeg vil lave en side som overholder
w3 standarden og det er godt nok lidt svært at gøre alle browsere
tilfredse.

Hvis I ser på http://www.ejstrup-kongskov.dk/test/ så skal jeg
prøve at forklare.

Jeg har et hvidt titel element på 70px i højden, men
bottom-border. Et menu element på 20px i højden med right, bottom
og left border. Så er der et mellemrum mellem menuen på 5px i
højden og så selve indhold elementet med alle borders - og det er
her det begynder at gå galt.

Indhold elementet er lavet sådan at der en topborder på 96px
dette er for at kunne lave en lodret centrering af hele siden med
alle elementer. Med z-index har jeg så gjort at indhold elementet
ligger bag de andre og det er for at jeg kan give indhold
elementet en højde på 100% - samtidig med at jeg kan få en border
hele vejen rundt da indhold element starter ved 95px.

Det vil samtidig sige at mellemrummet på de 5px mellem menu og
indhold også er lavet med en div.

OK, det var selve layoutet forklaringen. Normalt bruger jeg
doctypen for at overholde standarden, men her har jeg været nødt
til blot at have da siden ellers ville bliver over de 100%.

Det er lidt svært at forklare, men grunden er vist at hvis ikke
dtd'en er med så fortolker IE både borderen på 96px og selve
indholdet på 100% som 96px + 100% og derfor kommer scrollbaren.

Hvis derimod .dtd'en ikke er med så bliver sidens 100% højde lig
med 100%+96px.

Så hvis der ingen tekst er i indhold elementet så kommer der
ingen scrollbar i IE (som jeg gerne vil have, men det gør der i
NS og Mozilla.

MEN! Nu har jeg lavet en masse test-tekst på siden og IE gør det
som jeg vil have - hvis der ingen tekst er laver den sidens højde
på i alt 100% (uden scrollbar) og hvis der som kommer mere tekst
end der kan være i browser vinduet, så udvides indhold elementet
blot. Dette virker dog ikke i NS og Mozilla der stopper det
grønne indhold element og test-teksten forsætter blot ude i det
grå - meget underligt!

Og så for at gøre det endnu mere bøvlet så er det meningen at jeg
inde i det grønne element gerne skulle have et hvidt som lå
ovenpå med en margen på 5px - faktisk ville jeg også gerne have
hvis de nuværende indhold element havde en 5px margen til bunden
af browseren.

Ja, nu håber jeg at jeg har fået det hele med og der en venlig
sjæl der hjælpe med denne "udfordrende" opgave.

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials