[html/css] IE6 plaatst div's verkeerd

[Verwijderd]

Hya, ik heb een probleempje met het bouwen van wat ronde hoekjes van een div:

HTML:

<div id='container' style="position:relative; top:0; left:0; border:1px solid #acacac">
    <div id='tl' style="position:absolute; top:-1px; left:-1px; background-image:url('images/corner_tl.jpg'); background-repeat:no-repeat; width:5px; height:5px"></div>
    <div id='tr' style="position:absolute; top:-1px; right:-1px; background-image:url('images/corner_tr.jpg'); background-repeat:no-repeat; width:5px; height:5px"></div>
    <br />
    <br />
    <div id='bl' style="position:absolute; bottom:-1px; left:-1px; background-image:url('images/corner_bl.jpg'); background-repeat:no-repeat; width:5px; height:5px"></div>
    <div id='br' style="position:absolute; bottom:-1px; right:-1px; background-image:url('images/corner_br.jpg'); background-repeat:no-repeat;  width:5px; height:5px"></div>
</div>

Werkt prima in FF2:

Echter let eens op waar ie6 denkt dat de hoekjes moeten komen:

Ik heb er maar even pijlen bij gezet voor de duidelijkheid.. De bovenste staan trouwens ook niet helemaal recht. Lijkt me redelijk waanzin toch dit?

[ Voor 0% gewijzigd door Verwijderd op 20-04-2008 17:29 . Reden: code -> code=html ]

[Verwijderd]

Okee vanwege een voor mij compleet onduidelijke reden lijkt het volgende wel te werken:

HTML:

<div id='tab_container' style="position:relative; top:0; left:0; width:100%; border:1px solid #acacac">
    <div id='tl' style="position:absolute; left:-1px; top:-1px; width:5px; height:5px"><img src="images/corner_tl.jpg"></div>
    <div id='tr' style="position:absolute; right:-1px; top:-1px; width:5px; height:5px"><img src="images/corner_tr.jpg"></div>
    <br />
    <br />
    <div id='bl' style="position:absolute; left:-1px; bottom:-1px;width:5px; height:5px"><img src="images/corner_bl.jpg"></div>
    <div id='br' style="position:absolute; right:-1px; bottom:-1px;width:5px; height:5px"><img src="images/corner_br.jpg"></div>
</div>

Helemaal zeker ben ik er nog niet van, aangezien het wel lijkt alsof IE mijn divs gewoon ala random plaatst dus staan ze misschien alleen toevallig goed

edit:
Het werkt blijkbaar alleen met een xhtml doctype.. als ik hem op html 4.0 zet gaat het in firefox weer compleet fout

[ Voor 6% gewijzigd door Verwijderd op 20-04-2008 18:12 ]

[Borizz]

Nou die reden is voor mij wel duidelijk, width: 100% triggert namelijk hasLayout in Internet Explorer (het was trouwens handig geweest als je even had aangegeven wat het verschil was tussen je oude en nieuwe code).

En het zou ook prima moeten werken in Firefox met een HTML 4.01 doctype, waarschijnlijk zit er een typfout in je HTML 4.01 doctype (daarnaast is <br /> ongeldig in HTML).

[Michali]

Ik zou gewoon 4 divjes nesten die allen een hoekje als achtergrond hebben, en deze dan met background-position op de juiste plaats zetten. Je kunt ze dan allen een class geven en ze netjes in een aparte stylesheet de stijl geven die je wilt.

[frickY]

Het is redelijk logisch; DIVjes zijn block-elementen met standaard 100% breedte gevolgt doo reen line-break.

Het 2de voorbeeld zou ook gewoon moeten werken met achtergrondplaatjes in je DIVjes, zolang je de afmetingen van het DIVje maar blijft specificeren.

[_Thanatos_]

Ik zie hier een mooie toepassing voor Sliding Doors, wat normaal gesproken goed toepasbaar is bij een vaste hoogte, maar de techniek kan aangepast worden voor elementen van variabele hoogte.