Ik heb wel wat antwoorden, denk ik. Omdat je naar 't waarom vraagt komt daar ook 'n klein stukje geschiedenis bij uit de afdeling 'Opa zeurt weer over de Goede Oude Tijd'.
Ooit had je de zogenaamde browseroorlog tussen voornamelijk Netscape Navigator en Internet Explorer. Die probeerden allebei 'n zo groot mogelijk deel van de markt in handen te krijgen door allebei zoveel mogelijk eigen snufjes te bedenken, die alleen in hun browser werkten.
En daar kwamen nog tig ander browsers bij, zoals Opera. Hartstikke fijn, want dat betekende dat je letterlijk voor elke browser (en vaak ook nog voor elke versie van die browser) letterlijk 'n eigen site moest bouwen. Met JavaScript werd gekeken welke browser en welke versie 'n bezoeker had, en dan werd je naar de juiste site gestuurd.
Als jij vraagt 'andere waarden voor Internet Explorer?: Nee dus!!! Daar word je hartstikke gek van en 't werkt ook niet goed. Soms moet 't wel, maar meestal niet, en voor Internet Explorer 7 is 't helemaal nauwelijks nog nodig. Als 't echt nodig is kan dat met behulp van 'conditional comments'.
Goed, de browseroorlog. Netscape verloor en Microsoft probeerde Internet in handen te krijgen. Onder andere door 'n volkomen van de standaard afwijkende browser te bouwen: Internet Explorer 6. (Andere browsers als Opera, Netscape, Mozilla, Safari, Konqueror gingen zich toen al aan de standaard van W3C houden.) 'n Site werkte dus alleen in Internet Explorer 6, of in alle andere browsers (min of meer).
Door het gratis verspreiden van FrontPage die code maakt die alleen door Internet Explorer goed kan worden weergegeven werd dit nog versterkt.
Gelukkig is dat niet gelukt, anders had je nu waarschijnlijk aan Microsoft mogen betalen voor elk bezoek aan 'n site en voor elke mail. Microsoft heeft Internet niet in handen gekregen en Internet Explorer 7 houdt zich al veel meer aan de standaard, en hopelijk Internet Explorer 8 eindelijk 'ns net zo goed als Opera, Safari, Firefox, enz. (Elke browser heeft bugs, maar dat is iets anders.)
Maar inmiddels waren er dus miljoenen sites die niet aan de standaard voldeden en alleen door Internet Explorer goed werden weergegeven. Met 't toenemende gebruik van fatsoenlijke andere browsers 'n groeiend probleem.
Een of andere superslimmerik heeft toen bedacht om aan 't begin van elke pagina 'n code te zetten. Als die code er staat, dan wordt alles op dezelfde manier weergegeven in alle browsers. Als die code er niet staat, dan geeft Internet Explorer 6 (en ook 7) het in 'quirks mode' weer. En dat betekent dat je lay-out compleet vernacheld wordt. Dat gaf de mogelijkheid gewoon oude, bestaande sites te blijven gebruiken en gelijktijdig fatsoenlijke nieuwe sites te bouwen.
(Bij Internet Explorer 8 doet zich trouwens weer enigszins hetzelfde probleem voor, maar in veel mindere mate.)
En die code aan het begin mist dus bij jou.
In quirks mode, dus van de standaard afwijkend, gebeurt onder andere het volgende:
bij 'n box (zoals 'n div of paragraaf) worden marge, padding en border bij de breedte en hoogtevan de box opgeteld. Dat is de standaard. In quirks mode worden marge, padding en border
binnen de box gezet. Dus 'n volledig andere lay-out. Er zijn nog veel meer afwijkingen, maar dat is de belangrijkste. En daarnaast stikt het nog van de 'gewone' bugs in Internet Explorer 6 (7 is al veel beter).
Je moet in ieder geval aan het begin van elke pagina die code zetten: het 'doctype'.
Geldige doctypes vind je op de volgende pagina onder DTD List
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Omdat jij geen opmaak in je html gebruikt (netjes!), zou ik voor 'n Strict type gaan. Dat is veel makkelijker onderhouden en zo. Htm of xhtml maakt niet zoveel uit. Ooit leek het erop alsof html zou uitsterven, maar dat is niet meer zo. Frameset is prehistorisch en wordt in html 5 zelfs helemaal verboden. Heeft heel veel nadelen.
Als je 'n doctype kopieert, kopieer dan ook de url daaronder. Zonder url werkt het meestal niet en soms gedeeltelijk.
Die truc met tidy is prima, maar 't kan nog simpeler. Op de site van w3c kun je je html valideren (dan had je ook gelijk die melding gekregen over 't missende doctype). En er zitten nog meer fouten in je code, hartstikke handig zo'n validator. Html valideren:
http://validator.w3.org/
Je css kun je daar ook valideren:
http://jigsaw.w3.org/css-validator/
Firefox heeft trouwens 'n extensie waarmee je tidy in kunt bouwen: HTML Validator
https://addons.mozilla.org/en-US/firefox/addon/249
Eventueel kun je ook nog naar m'n site gaan via m'n profiel. Daar staat inmiddels 'n hele reeks handleidingen waarin ook dit soort dingen worden uitgelegd aan de hand van voorbeelden. Ook over conditional comments en zo.
