Image floating issues with IE

Hi all,

Interesting behavior, for me -being so inexperienced I guess, or I'm doing something wrong... please check screenshot for example. This screencap is of IE6:

In FF and Opera the image is in the forefront (as I intended) - only IE is placing the div on top of the floated image. I tried setting a z-index but I'm not sure if I did it right - it had no effect.

Here is the code I'm using:
<a href="http://www.abcnews.go.com/International/wireStory?id=1056916" target="_blank"><img src="images/news/occupation291lg.jpg"
width="150" height="100" class="floatleftborderpad" align="left" alt="Sunnis Warn Against Constitution Draft" /></a>
<h3>Sunnis Warn Against Constitution Draft</h3>

<div class="stories">BAGHDAD, Iraq Aug 21, 2005 — A day before the deadline for the new constitution, Sunni Arabs appealed Sunday to the
United States to prevent Shiites and Kurds from pushing a draft through parliament without their consent, warning it would only worsen the crisis in Iraq.

<br /><a href="http://www.abcnews.go.com/International/wireStory?id=1056916" target="_blank">(Full Story)</a></div>

And the CSS:

.stories {
background-color: #ffffff;
border: 1px solid #cccccc;
padding: 6px;
}

.floatleftborderpad {
float: left;
border: 1px solid #666666;
margin: 5px 10px 0 0;
padding: 2px;
}


Thanks for any help with this! :)

Dodge

Think it's because you're floating the image left, but not specifying the width of the stories div.

Think it might be better to leave the image without a float and float the actual stories text to the right...?

No matter, what I posted wasn't what you wanted and didn't work in FF...

Giving the div a sufficient left margin to clear the image would work as well:
.stories {
background-color: #ffffff;
border: 1px solid #cccccc;
padding: 6px;
margin-left: 110px;
}
You'll probably have to adjust padding and margin values on the various elements to line everything up.
By the way: the following structure may make a little more sense from a semantic point of view:
<div class="stories">
<a href="..."><img src="..." /></a>
<h3>Sunnis...</h3>
<p>BAGDAD, ...</p>
</div>
You'll have to move around the styles a bit.

Great! That's much better - thanks for the tip on the left margin. :)

Thanks!
Dodge