A strange effect on resizing the IE6 window...

I've pretty much fixed it!

The floated box on the right is based upon Creating Custom Corners and Borders from A List Apart. There are a number of floated paragraphs within that float, but something strange seems to happen to the padding in Internet Explorer 6 when you shrink the browser window (note that I've highlighted the issue by placing red borders around the various elements)

1. Working OK:
   
   This is shows identically sized IE6 and Firefox 0.9.1 browser windows - see how the <h3> element's edge is flush against the outer .boxout container.
   
   
2. IE6 breaking:
   
   Here, I've resized both the Firefox and IE6 windows to JUST before the point where the floated paragraphs wrap. As you can see, the arrow highlights a area of padding that occurs within IE6 where there was none previously. This new padding area 'grows' gradually as you reduce the size of the browser width, and subsequently disappears once you hit the 'paragraph wrap' point.

I've Google'd and I can't find any mention of this particular problem (no doubt someone will prove me wrong!!) - if ANYONE knows what's going on here, and how to fix it, PLEASE let me know!!! If repairing the problem in IE6 breaks the layout in Firefox, then I'm more than happy to use Microsoft's Conditional Comments to overcome that!

Return to IE 6 Float Conundrum
Return to main Testing page