IE issue: image overlapping two divs

[Rehevkor]

Now that I've finished most of my website, I'm going to try getting it compatible with IE. I need some help with the first issue.

I have headline divs on various parts of my website (http://www.halcyonflow.com) that are partially overlapped by icons on the right side, which is the way I want them. However, this doesn't seem to work in IE; it simply renders the image above and forces the headline div down to the next line. How can I get this working in IE as well as Firefox?

This is the code snippet that displays the headline bar and the image (via PHP):

echo "<div class=\"content\">";
echo "<div id=\"imgRight\"><img src=\"media/".$row->icon.".gif\" alt=\"".$row->icon."\" /></div>";
echo "<div class=\"headline\"><h4>".$datetime." > ".$row->headline."</h4></div>";

The "content" class in base.css:

.content {
position:relative;
width:auto;
min-width:120px;
margin:0px 170px 20px 180px;
overflow:hidden;
z-index:3;
}

The "headline class in base.css:

.headline {
position:relative;
width:100%;
min-width:120px;
padding:1px;
padding-top:0px;
z-index:4;
}

#imgRight in base.css:

#imgRight {
position:relative;
float: right;
padding-right:10px;
padding-bottom:5px;
z-index:5;
}


Any advice would be appreciated.

[KDLA]

Why don't you use the image as a background-image?

.headline {background: transparent url(media/news.gif) no-repeat right;}
.headline h4 {background #778899;}


You may need to tweak some values and such, but this would be a much more user friendly way of doing it.

BTW - you should use IDs only once per HTML document; repeated instances need to be classes (as denoted in my coding).

[Rehevkor]

Okay, but if I set it as a background image, it won't overlap like that anymore, will it? It will either be cropped in the headline div or force it to expand, which I definitely don't want.

[KDLA]

What you'd be doing is creating a container div for the headline, which would have the background image.
You'd put some padding on the headline div, and nest the two.

.headline {background: transparent url(media/news.gif) no-repeat right; height: /*height of the image; }
.headline h4 {background #778899; line-height: 1em; padding: 3px; margin: 0; display: block;}


<div class="headline">
<h4>Headline Title</h4>
</div>

[Rehevkor]

Sorry about the late reply, I've had a busy weekend.

Anyway, I just tried what you suggested, and it's not what I'm going for. I want the news icon image to OVERLAP the headline. When I do what you say, I make the headline taller and it contains the image entirely, which looks terrible. Also, the image varies depending on the type of news item I choose, so I can't hard code the image filename in the CSS. When I try to do it in-line, like this...

echo "<div class=\"headline\" style=\"background: transparent url(../media/news.gif) no-repeat right;\"><h4>".$datetime." > ".$row->headline."</h4></div>";

... the contents of the headline tag disappears completely, leaving only the background.

I'm beginning to wonder if IE is incapable of rendering this kind of CSS design.

Edit: Ok, almost immediately after posting this I realized what you were trying to do with your code. This time I got it set up right and it almost works. The image appears behind the headline now rather than on top of it, and since they're position:relative I can't use the z-index to change that. What can I do now?

[KDLA]

Is position relative really needed? It's just a straight column content area.