Browsera Blog Cross-Browser Site Compatibility

IE6 Image Size Causes Float Wrap - Livekick Homepage

The Livekick homepage suffers from a common problem in IE6.  Floats are getting wrapped incorrectly due to IE not clipping the image to  its containers width.   IE6 renders the Aerosmith thumbnail as its entire width, even though that causes the containing div, which has width=129px, to expand to fit it.   The code looks like this

<div id=’divHotToursTiles’>

<div class=’tile’>SNIP</div>

<div class=’tile’ style=’width: 129px’>

<div>

<a><img></img></a>

</div>

<div class=’tile’>SNIP</div>

<div class=’tile’>SNIP</div>

</div>

The fix for this is relatively simple.  Just add “overflow: hidden;” to the tile class to prevent IE6 from forcing the image’s parent div to expand.