Can someone please tell me why IE6 doesnt display my news section separator image correctly as seen in IE7 & Firefox.

This is the problem page: http://www.outer-edge.com.au/test/news.html

Basically the news items are in 2 colums 'news_COL1' (left colum) and 'news_COL2' (right colum). I've added the news sparator image in news_COL1 like this:

<span style="clear:both;"><img src="http://www.webmaster-talk.com/images/EnviroNewsBanner.gif" width="710" height="50" /></span>

After doing this, the image passed straight through behind news_COL2 and the text was over the image, therefore I had to add a 50px break like this:

<div style="height:50px;">&nbsp;</div>

How can I get this working in all browsers correctly?

My suggestion:

Change your #news_col1 and #news_col2 from ID's to classes, that way you can re-use them.

You can then have 2 distinct sections, Adventure & Environmental, each with a col1 and a col2, and the separator header image in between them.

Then you would have no need for the spacer div (which is real hack anyway) and you could clear the floats - and I"d also use a class for that rather than using a needless <span>.

Ok Ive changed the ID's to Classes and removed the spacer div...Im not too sure what to do now? How do I get the 'Thin End of the Dredge' item below the 'Environmental News' separator image?

Ok, not sure how you structured your HTML but you should have something like:

<div class="news_col1">
news items
</div>
<div class="news_col2">
news
</div>
<img src=xxxxx class="clear" /> - your Environmental header with the clear:both set in a class for it.
<div class="news_col1>
news items
</div>
<div class="news_col2>
news items
</div>
.... you'll need another clearing element after you close this col2, I use a clear on a <br> like this:

.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

HTML is <br class="brclear" />

Does that make sense ?

Thankyou - that made sense and it fixed the problem!!

Kewl . It looks good !