IE6 Image Size Causes Float Wrap - Livekick Homepage
Jun0
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.
DIV drop in IE6 due to expanding DIV - Apple’s “Why Mac” page
Jun1
In running a test against the brand everyone loves or hates, Browsera found a couple of IE6 layout bugs on the Apple “Why You’ll Love Mac?” page. This one is caused by attempting to put two floating div’s into a parent div that is not wide enough. Here is the relevant code:
<div class=”grid2col” style=”width: 100%”> <!– this width was 844px for me –>
<div class=”column first” style=”width: 565px; float: left”>
</div>
<div class=”column last” style=”width: 200px; float: right”>
<img id=”model” height=”382″ width=”288″ alt=”Macbook” src=”http://images.apple.com/getamac/whymac/images /pleasure_model20090106.jpg”/>
</div>
</div>
Even though the parent div width of 844px seems plenty wide enough to fit the two floats with the specified widths (565px + 200px = 765px), Internet Explorer 6 will automatically expand the div containing the image to fit it. Once you add these widths together (565px + 288px = 853px) the elements cannot fit on the same line, and the image gets dropped down. If you set
overflow: hidden
on the “column last”, IE6 will no longer expand the div and the elements will fit together correctly. Note that this will cause the image to be slightly clipped on the right hand side. Alternatively, the containing div can be expanded to fit the image, though this will slightly change the layout of the page.
Float Drop Issue in IE6 - Bing Travel
Jun1
Microsoft’s new Bing brand, which is basically rebranded Live, which used to be MSN Search, launched a couple weeks ago. You’d think that MS would have been very diligent to cross-browser test their pages, however, Browsera detected some unsightly layout issues occuring in IE6.
The first is on the Bing Travel page. You can see that the “search hotels too” radio button is misplaced in IE6. Here is Browsera’s detection on the float drop on the Bing Travel page.
This problem appears to be caused in Internet Explorer 6 by the <div class=”clearAll”> inside the <div class=’submitButton’> not having an explicit width and thus expanding to 100%. Applying style
width: ‘1px’
to that clear div fixes the problem and pulls the radio button into the right spot in IE6.