Gare IE renderbug mbt padding - Softwareontwikkeling

maandag 27 maart 2006 18:52

Acties:

(inspiratie == 0) -> true

Topicstarter

Onlangs kwam ik een hele gare bug tegen in IE6.

HTML:

<html>
   <body>
       <div id="c_205" style="background-color:#97b8e3;">
           <div id="c_205_cell_c_209">
               <div id="c_209" style="padding-bottom:5px;">some text</div>
           </div>
       </div>
       <div id="c_201">some other text</div>
   </body>
</html>

Deze code rendert IE als volgt:
Afbeeldingslocatie: http://www.ddewit.nl/zooi/ie%20padding%20bug%20screen.png

Het lijkt erop dat div c_201 binnen c_205 getrokken wordt, want als ik met js de hoogte van c_205 opvraag krijg ik 43px terug tegen 24px voor c_209. Weghalen van de padding lost het probleem op, en een work-around is om de padding op c_205 te zetting ipv op c_209.
Is er iemand die hier een verklaring voor heeft?

NB: Reacties over semantiek e.d. voegen hier niet zoveel toe omdat dit sterk gestripte html is die uit Echo2 komt rollen.

De wereld ligt aan je voeten. Je moet alleen diep genoeg willen bukken...
"Wie geen fouten maakt maakt meestal niets!"

maandag 27 maart 2006 19:17

Acties:

Michali

Vreemde bug idd. Een verklaring? IE heeft wel meer vreemde trekjes. Deze heb ik nog nooit gezien iig. Het treed niet meer op als je div#c_205 een border geeft. Misschien kun je daar gebruik van maken? Je zou hem bijvoorbeeld een bottom border kunnen geven van 1px en dan een bottom margin van -1px. Anders zou ik het ook niet weten.

Noushka's Magnificent Dream | Unity

maandag 27 maart 2006 19:48

Acties:

JHS

Splitting the thaum.

Om dit soort vage bugs te voorkomen is het misschien een goed idee om een standardmode afdwingend doctype te gebruiken

?

DM!

maandag 27 maart 2006 19:53

Acties:

X-Lars

Just GoT it.

Ik zit ook al ff te kijken, dat helpt ook niet:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test</title>
    </head>
   <body>
       <div id="c_205" style="background-color:#97b8e3;">
           <div id="c_205_cell_c_209">
               <div id="c_209" style="padding-bottom:5px;">some text</div>
           </div>
       </div>
       <div id="c_201">some other text</div>
   </body>
</html>

maandag 27 maart 2006 19:57

Acties:

Borizz

Een position:relative geven aan c_201 of explicitiet de div een hoogte geven wil ook nog weleens helpen (neemt niet weg dat het niet nodig zou hoeven zijn natuurlijk).

If I can't fix it, it ain't broken.

maandag 27 maart 2006 20:04

Acties:

X-Lars

Just GoT it.

Het zal wel te maken hebben met het "hasLayout" verhaal in IE, een line-height:1% lost het wel op namelijk.

maandag 27 maart 2006 21:38

Acties:

NetForce1

(inspiratie == 0) -> true

Topicstarter

JHS schreef op maandag 27 maart 2006 @ 19:48:
Om dit soort vage bugs te voorkomen is het misschien een goed idee om een standardmode afdwingend doctype te gebruiken ?

Echo2 gegenereerde code is xhtml transitional

X-Lars schreef op maandag 27 maart 2006 @ 20:04:
Het zal wel te maken hebben met het "hasLayout" verhaal in IE, een line-height:1% lost het wel op namelijk.

hasLayout kende ik nog niet, maar dat lijkt het inderdaad te zijn. zoom:1 lost het nl ook op. Voor geinteresseerden is dit wel een goed artikel: http://www.satzansatz.de/cssd/onhavinglayout.html.
Nu moet ik alleen nog even uitvogelen hoe ik dit kan vertalen naar Echo2 code zonder de code te hacken die de html genereerd...

De wereld ligt aan je voeten. Je moet alleen diep genoeg willen bukken...
"Wie geen fouten maakt maakt meestal niets!"