Dat is theoretisch onmogelijk, dus bestaat het probleem niet
. Alleen heb ik nou ook 'n probleem: ik heb 't met m'n eigen ogen gezien. Da's 't soort probleem waar je voor wakker blijft.
Ik snap er helemaal niets van. Ik dacht eerst aan 'n bug in Firefox, maar Safari en Google Chrome doen 't zelfde met overflow: hidden. Wat ik niet snap: die overflow: hidden heeft er inderdaad helemaal niets mee te maken. Die hoort de INHOUD van siteContent te regelen, niet siteContent zelf.
Ik heb je code tot 't uiterste minimum gesloopt en de fout is er dan nog steeds:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<style type="text/css">
div#bodyContainer {background: #ddd;}
#siteContent {width : 984px; height : 1000px; overflow: hidden;}
#mainNav li {float : left; width : 134px;}
</style>
<title></title>
</head>
<body>
<div id="bodyContainer">
<ul id="mainNav">
<li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
<div id="siteContent"></div>
</div>
</body>
</html>
In Internet Explorer 6, 7 en 8 krijg je die onwijs grote scrollbalk niet, en in Opera ook niet. In Google Chrome, Safari en Firefox wel.
Als ik bodyContainer 'n border van 1 px geef, gaat 't ook goed in Firefox. ?????? Dat kan helemaal niet, heeft er niets mee te maken.
Als ik de floats weghaal bij de <li>'s en nog wat dingen gaat 't ook goed, maar dat begrijp ik.
Als je overflow: hidden verandert in overflow: visible gaat 't ook goed in alle browsers. Dat kan ook niet, heeft er niets mee te maken.
Als je siteContent 'n float: left geeft gaat 't ook goed in alle browsers.
Op een of andere manier gebeurt er 't volgende, wat niet zou mogen volgens de standaard: bodyContainer is 'n div en wordt niet gefloat, hoort dus op 'n nieuwe regel te worden gezet. Maar in plaats daarvan wordt hij NAAST de <li>'s (niet naast de <ul>) gezet. Volgens mij doen Firefox, Safari en Google Chrome dit dus gewoon hartstikke fout en wordt dit veroorzaakt door de combinatie van visible: hidden met die floats, de breedte van de <li>'s, e.d.
Uitleggen kan ik 't dus niet, ik denk gewoon dat 't 'n fout is. Waarbij volgens mij uch kuch slik Internet Explorer 7, 8 en zelfs 6 't bij grote uitzondering wel goed doen (en Opera), en de andere drie fout.
Konqueror doet 't trouwens ook gewoon zoals 't hoort. Vreemd, want die gebruikt ongeveer dezelfde rendering engine als Safari en Google Chrome.
Ik ben toch nog 'ns gaan zoeken. 't Is 'n onduidelijkheid in de css 2.1-specificatie. Zitter er wel meer in, trouwens. En sommige dingen, hoe die erin zijn gekomen... Als je naast floats (zoals jouw <li>'s) 'n blok-element zet met 'n bepaalde eigenschap, waaronder overflow: hidden, dan mag dat blok-element naast de floats worden gezet, maar ook eronder. De specificatie zegt zelf dat dat niet in de specificatie staat. Handig! Er staat wel 'n kreet over 'bij voldoende ruimte'.
'Bij voldoende ruimte' is 'n doodzonde in 'n technische specificatie. Wat is voldoende ruimte? Met 'n scrollbalk heb je inderdaad voldoende ruimte... Persoonlijk vind ik dat ongeveer hetzelfde als de muur naar de buren eruit beuken om m'n woonkamer te vergroten. Wat ik zo gezien heb zijn de meningen nogal verdeeld over wat juist is, net als de browsers dus. In dit geval vind ik dat Opera en IE 't beter oplossen.
Specificatie css 2.1 9.4.1
http://www.w3.org/TR/CSS21/visuren.html#block-formatting :
Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts.
Specificatie css 2.1 9.5
http://www.w3.org/TR/CSS21/visuren.html#bfc-next-to-float :
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.
Heb trouwens gezien dat de meningen hierover volkomen uiteen lopen en dat 't veel verwarring oplevert.
