Thank fook for that! I've managed to resolve both of my CSS Problems today.
IE6:
I spent nearly 2 hours yesterday looking for a solution to the IE6 failure to display bug. could I find it? Could I buggery, no matter what I Googled for. Had I known that it is commonly referred to as the Peekaboo bug I'd Ave been well away. This morning, whilst looking for something completely unrelated I came across a link to this guide to dealing with it.
The easiest way is to include a "position : relative;" in the CSS for the DIVs of the floating element and the container DIV. Unfortunately, whilst this solved the problem it also over-wrote the links at the top of the content. The alternative I used was to specify a line height in the container DIV thusly: "line-height: 1.2em;".
There would appear to be a better way of dealing with it using the Holly hack but as I didn't understand how to apply that to my CSS I ignored it.
Mozilla Firefox:
The problem in Firefox would appear to be a difference in the way FLOATs are handled. It not at all clear which is the correct way, IE6's or Mozilla's, just that they're different.
Huy suggested in the comments using "<br clear="all">" (as this is HTML 4.01 and not XHTML it doesn't need the " /" in the tag). Whilst this worked to clear the float, it left the title for the next paragraph below the level of the top of the accompanying picture. But it did point me in the right direction.
I've added an empty DIV to the end of each section to clear the float. Unlike the BR, the DIV doesn't have any height and so doesn't affect the positioning of the next paragraph. The DIV looks like this: "<div style="clear: both;"></div>".
Problems solved. Nice One!
Good solutions. I think I was meaning the div instead of the break, but oh well, that way is much better.
Thanks for the suggestion anyway. It pointed me in the correct direction.
Each image also contains a break clear which is sufficient for IE but not for Mozilla.
If you ask me, this is one area that IE does correctly but Mozilla doesn't.
This page is not Valid XHTML 1.0 Transitional!
The cleared div trick for Mozilla float problems solved a pressing problem for me. I needed the container of the floated divs to *contain* the divs. That is, expand around the divs. Thanks.
