IE CSS bugs when using floats and
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
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.