A strange effect on resizing the IE6 window... NOW WORKING

Go to the problem

I decided to have a bit of a rethink! As the floated container (which I may well decide NOT to float right in my final design!) will contain images of logos of varying heights/widths, I decided to lose the captions underneath each image - a logo should provide enough information as long as I supply alt/title attributes too! On testing this version, everything seems to work OK.

The CSS changes that I made were:

1. #content .boxout .boxoutBody {
   	background-position: 100% -15px;
   	margin: 0 0 0 5px; /* [1] */
   	padding: 1px 15px 1px 0;
   	text-align: center; /* [2] */
   }

   [1] reduced margin-left from 15px to 5px as centered images would now be 'pushed' too far to the right (this margin is necessary to ensure that the left-hand border displays correctly)

   [2] centre the images - more aesthetically pleasing!

2. #content .boxout .boxoutBody p {
       display: inline; /* [3] */
       /* [4] */
   }

   [3] As I'm centering the images, I no longer need to float them to the left, so I declare the paragraphs inline and not block.

   [4] Removed the margin-right: 3px and text-align: center declarations as you can't apply these to inline elements.

3. #content .boxout .boxoutBody p img {
   	border: 0;
   	margin: 10px; /* [5] */
   }

   [5] ...however, I still need to space out the images a little, so I set the img property value to 10px.

The only change that I made to the HTML (aside from removing the text captions), was to simulate differing heights/widths for each image.

Take a look at the problem

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!

Back to my solution

Return to IE 6 Float Conundrum
Return to main Testing page