Elements don't display correctly if they have a background color and a child element that uses float: left.
The #content{background: #FFFFFF;} declaration is the source of the problems. Remove it and the hidden element displays fine.
Bug applies only to Explorer 6.
Test page Workaround is not included
Reported by: Francis Mak.
Explorer 5-6 Windows | Reported on 6 July 2005.
This site is no longer maintained. I’m sorry, but it’s just too much work for too little return. You can continue to browse old bug reports, though.
Search reports by browser:
2 Posted by francis on 7 July 2005 | Permalink
thank you very much.
3 Posted by Luke on 19 August 2005 | Permalink
Hi - one solution that worked for me was to give both the holding div and the floated element "position: relative" -> see:
4 Posted by Jean-Michel Reghem on 18 December 2006 | Permalink
setting position:relative for both div have a bad effect: the background-color of the parent div who receive this position:relative is ignored ... so it is the same result as removing background-color ...
The real workaround is to set
display:inline-block;
in the css of the parent div
as this:
#body2 {
background-color:rgb(239,244,248);
display: inline-block;
}
--> tested on IE7, FF2 --> no problem ...
and it clear the bug on IE6
(solution found here: http://pear.reversefold.com/badIE/ by Nicolas BUI)
5 Posted by Jesse Shieh on 10 March 2007 | Permalink
I was able to fix this by setting zoom:1 in the element containing the background color. Since it's an IE-only bug and zoom is only recognized by IE, this seems to have the least amount of risk in terms of side-effects in other browsers.
I also see this problem if the child element isn't floating, but is hidden i.e. display: none.
6 Posted by Tim on 13 May 2008 | Permalink
I had a related problem and spent several hours trying to track down a solution -- without luck. IE6 would not display the contents of my floated DIVs.
But inadvertently, I discovered the problem. While this probably is reported elsewhere, I could have used it here. So here goes:
My DIV was contained inside a DIV with "min-height" defined. IE6 doesn't support this, and I knew that, but I didn't know it would cause this related bug.
So when I set the height attrib for my DIV, the float magically appeared as it should. Further, relative positioning on another DIV also worked as it should!
1 Posted by Ingo Chao on 6 July 2005 | Permalink
"This caption never display" can be revealed by sizing the window and scrolling, or by selecting the region, so I guess it's a variant of the peek-a-boo
http://positioniseverything.net/explorer/peekaboo.html
and the fix would be to apply the Holly hack
http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0
to the container.