[css] Probleem met overflow:auto - Softwareontwikkeling

vrijdag 9 maart 2007 17:57

Acties:

Carpe diem!

Topicstarter

Het probleem is een verschil tussen Internet Explorer 6 and Firefox 2.0.0.2. De eerste doet het goed, de tweede gaat de mist in:

HTML:

<html>
<BODY>
    
<style type="text/css">

h2 {    font-family: Arial;
        font-size:105%;  }
pre {   font-family:"Courier New";
        font-size:90%;  }
div {   overflow:auto;
        border-width:1px;
        border-style:solid;  }

</style>

<H2>Header 1</H2> 
<H2>Header 2</H2>
<div><pre>Some text goes here.</pre></div>
  
</body>
</html>

In Internet Explorer staat er een mooie kader rond "Some text goes here." maar niet in Firefox. Deze toont de onderste lijn van de kader niet.

Wanneer werkt het wel:

Verwijder lijn 16 of 17.
Verwijder "overflow:auto;"

De search heeft me al duidelijk gemaakt dat die overflow property toch best buggy is maar toch had ik verwacht dat dit voorbeeld wel zou werken. Enig idee wat hier de oorzaak is?

vrijdag 9 maart 2007 18:45

Acties:

Setragasj

is using radars to communicate

Een margin aan je pre geven helpt

vrijdag 9 maart 2007 19:03

Acties:

BasieP

is het je opgevallen dat zonder die headings het wel werkt?
beetje basic debug werk zou je moeten doen vermoeden dat het aan die 105% van je h2 ligt.

headings hebben wat rare eigenschappen (rare margins/paddings bijv.), ik denk dat het er mee te maken heeft dat het block lvl elementen zijn die hun best doen om mee te sizen. Blijkbaar zit hier een bugje in in FF (zo lijkt het tenmiste.. crisp?

)

(trouwens zou ik voortaan je demo's even voorzien van doctype, dit maakt soms een hele berg uit)

[ Voor 39% gewijzigd door BasieP op 09-03-2007 19:06 ]

This message was sent on 100% recyclable electrons.

vrijdag 9 maart 2007 20:14

Acties:

Ravefiend

Carpe diem!

Topicstarter

BasieP schreef op vrijdag 09 maart 2007 @ 19:03:
is het je opgevallen dat zonder die headings het wel werkt?
beetje basic debug werk zou je moeten doen vermoeden dat het aan die 105% van je h2 ligt.

Dat had ik al wel ontdekt ja (Verwijder lijn 16 of 17 in TS) maar op zich doe ik hier niks verkeerd mee.

BasieP schreef op vrijdag 09 maart 2007 @ 19:03:
(trouwens zou ik voortaan je demo's even voorzien van doctype, dit maakt soms een hele berg uit)

I'll keep that in mind ..

vrijdag 9 maart 2007 20:16

Acties:

BasieP

Ravefiend schreef op vrijdag 09 maart 2007 @ 20:14:
[...]

Dat had ik al wel ontdekt ja (Verwijder lijn 16 of 17 in TS) maar op zich doe ik hier niks verkeerd mee.

[...]

I'll keep that in mind ..

wat ik trouwens vaak doe is behalve de font-size van headings ook de line-height aan passen. Alleen weet zo niet of dat in procenten kan

This message was sent on 100% recyclable electrons.

vrijdag 9 maart 2007 23:21

Acties:

crisp

Devver

Pixelated

overflow:auto heft het collapsen van margins met siblings op, maar blijkbaar maakt Ff hierdoor een afrondingsfoutje bij het opnieuw berekenen van de marge van de voorgaande header (default voor H2 is 0.83em voor top en bottom) wat doorwerkt in het painten van de div met de pre erin.

Geef de H2 maar eens een iets andere margin-bottom, bijvoorbeeld 0.82em of 0.81em. Bij een margin-bottom van 0.80em valt de bottom-border van de div weer weg

Intentionally left blank

zaterdag 10 maart 2007 09:34

Acties:

Ravefiend

Carpe diem!

Topicstarter

Good point crisp! Hierbij komt nog dat het pas wordt getoond als ik er margin-bottom:0.84em; van maak voor H2. Bij elke lagere waarde gaat het weer fout dus FF is hier duidelijk niet zo geweldig.

Voelt er zich iemand geroepen om dit bugje ff te loggen?