Situation:
In Internet Explorer 6, the last div from a group of floating divs may have content disappearing.
<div id="floating"> <div class="float group-a">a <img src="#path" alt="#Path" /></div> <div class="float group-b">b<img src="#path" alt="#Path" /></div> <div class="float group-c">c<img src="#path" alt="#Path" /></div> <div class="float group-d">d<img src="#path" alt="#Path" /></div> <div class="float group-e">e<img src="#path" alt="#Path" /></div> </div><!-- end #floating -->
#floating .float { display:block; float:left; }
In my specific situation, the last div of #floating, the .group-e div had the image disappeared. Although upon loading the web page in Internet Explorer you can view the image it quickly dissapeared once completed the loading.
Various solution that I’ve tested
- Add position:relative with z-index:1
- Add width and height specific for that container
- Add line-height
Solution that worked
Adding display:inline for the floating div .float:
.float { display:inline; /* For Internet Explorer 6 only */ }
Credits
Looking for more? See all posts on the blog.