Ik ben laatst begonnen met een website in div's te maken ipv table's.

Dit omdat iedereen commentaar gaf op mensen die table's voor layout gebruiken.

Nu heb ik met Mozilla naar mijn mening een goede basis voor een layout gemaakt, maar ik ging hem effe bekijken in IE en ik schrok me de tyfus...

Klopt het dat IE sommige css componenten van DIV's niet ondersteund.

Kijk maar eens op http://www.mgunit.nl/4b/
Als je bijvoorbeeld deze http://www.mgunit.nl/4b/layout.php?id=3 door de validator haalt krijg je onderstaande error.

Sorry, I am unable to validate this document because on line 11 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.

Edit: Begin eens met een doctype aan je html te geven.
Maar het gaat natuurlijk om hoe het er in IE precies hetzelfde uitkomt te zien al hij er nu in FF uit ziet
Hallo Lapidi,

dat je site er in IE ineens heel anders ziet, komt omdat IE anders omgaat met het zogeheten "box-model".

De ene browser telt de breedte van een border en padding-waardes op bij de totale breedte van een DIV en de andere niet.

Daarom begin ik mijn CSS meestal met:

<style>

* {
margin: 0;
padding: 0;
}

</style>

Die regel zet de margins en de paddings van alle elementen op 0. Als je van daaruit werkt, is de kans groter dat je pagina zowel in IE als in FireFox werkt.
@Jan K.
Dat is helaas ook niet het probleem :(
Alleen de <P> verdwijnen :s

Het zit hem ergens anders in.
Ik heb alle div's een speciefieke plaats gegeven. In Firefox geeft hij dit gewoon weer en doet ie nergens moeilijk over.

Bij IE start de Div wel op de plaats van de TOP en de LEFT, maar als je dan ook nog een BOTTOM hebt ingevult (waar de div moet eindigen) luisterd hij daar niet naar, maar stopt waar de text ophoud, of gaat juist door als er nog text over is.

Hier een stukje css:

#menu{
position: absolute;
width:150px;
top:110px;
left:150px;
bottom:68px;
overflow: auto;

color: #c8c8f8;
background-color: #0099FF;
text-align:center;
border:1px solid #000000;
}
edit: Typo
Op die manier!

Je wilt dus een div die altijd dezelfde afstand tot zowel de onder- als de bovenkant heeft.

IE doet moeilijk als je tegelijkertijd TOP en BOTTOM gebruikt. Je kunt dan beter zoiets doen met je menu:

#menu {
height: 100%;
margin: 110px 0px 68px 0px;
}

De vier waarden die ik opgeef voor de margins zijn (in de volgorde van de klok):

boven - rechts - onder - links;
ok :D

thnx, ik ga het gelijk proberen...
Moet je ook nog width 100% zetten?
@ Lapidi

Nee, je kunt gewoon pixels opgeven hoe breed je menu moet zijn.
hmm, als ik height op 100 zet, wil ie gelijk zijn recht halen door naar onder door te gaan om de volledige schermhoogte te bereiken :s

Reageren