If a div is given a background colour and contains floated items (floated using CSS’s float or HTML’s align on images), things can go very wrong in Internet Explorer – screenshot of my examples page in IE6, compared with how it should look.
Internet Explorer 6 sometimes hides some or all of the main content of the div (examples 2 and 5 have their titles missing); additionally in Internet Explorer 5 and 6, if the container is given position: relative, the floated items disappear (example 4). Contrary to other reports, no spacer div of any sort is necessary to provoke this bug – none is in use in the examples given here. Scrolling down to hide the missing section and then back up ‘cures’ the problem, but this isn’t exactly a viable solution.
Other sites have noticed this problem, including evolt.org and Position Is Everything (the Peekaboo bug, with extra funny behaviour with links :) ), and their solution is to add position: relative to various elements; either the items that disappear (evolt.org), or both the container div
and every floated item within it (Position Is Everything). This isn’t
straightforward, as you have to cover every possible element, and it
also unfortunately leads to other bugs with position: relative, notably in IE5 on the Mac. Another solution mooted in Position is Everything and in the comments on evolt.org’s page is giving the container div a width, which does appear to cure the problem, but may be impossible to implement if the div has borders or margins.
My solution is simpler: give the container div a line-height. The default line height of browsers appears to be around 1.1-1.2, so setting line-height to around that provides no or hardly any visual change, but cures the bug in IE.
To illustrate the problem and solutions, I have provided six examples (shamelessly based on evolt.org’s), and some screenshots of that page, for Internet Explorer 6 and Firebird 0.6.1.
