View Full Version : Image floating issues with IE

08-22-2005, 03:10 PM
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! :)


08-22-2005, 03:39 PM
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...

08-22-2005, 03:57 PM
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>
<p>BAGDAD, ...</p>
You'll have to move around the styles a bit.

08-22-2005, 05:47 PM
Great! That's much better - thanks for the tip on the left margin. :)