[CSS] IE6 weigert margin-top op div toe te passen

[pelleke]

Haai Tweakers!

Ik begin me steeds meer te verdiepen in CSS, maar ik kom nu een bugje tegen in IE6 waar ik bizar weinig over gedocumenteerd vind op internet. Het geval wil als volgt:

code:

#layerLogin {
    text-align: left;
    background: #eee;
    margin-top: 150px;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    border: 1px dashed #000;
    padding: 10px;
}

Een voorbeeld van deze website is te zien op *.

In FF gaat het login-boxje netjes 150 pixels naar beneden, maar in IE6 blijft ie gewoon aan de bovenkant plakken! Ik heb geen idee hoe dit komt, en hoe ik het moet oplossen.

[ Voor 3% gewijzigd door pelleke op 25-08-2006 15:35 ]

[crisp]

Rare bug inderdaad. Verplaats je #imageLogo div naar onder de #layerLogin div en het probleem lost zich op.
Overigens zou ik die XML declaratie ook weghalen aangezien IE daardoor in quirksmode rendered (sowieso verstuur je de pagina als text/html dus het is zwaar overbodig).

[JHS]

Het heeft volgens mij te maken met de width die je opgeeft .

[pelleke]

Okee, nu wordt het nog gekker. #imageLogo heeft position: absolute. Als ik die weghaal, dan gaat het gewoon weer goed!

Nu breekt finaal mijn klomp. Maar omdat het (door mijn php-code) erg lastig is om die declaraties te verwisselen, ga ik even proberen of ik het logo relatief kan positionen.

// EDIT
@JHS: De width weghalen zorgt inderdaad ook voor een complete oplossing. Vreemd.

[ Voor 14% gewijzigd door pelleke op 03-03-2006 17:14 ]

[pelleke]

Heb het even zo opgelost:

code:

CSS:
#imageLogo {
    top: 10px;
    text-align: right;
}
#layerLogin {
    background: #eee;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    border: 1px dashed #000;
    padding: 10px;
}

code:

HTML:
<div id="imageLogo"><img /></div>
<div id="layerLogin><p>blaat</p></div>