Image Positioning - CSS Browser Compatibility Issue

[Omicrontau]

I am having a hard time resolving a browser compatibility issue while using CSS. Follow the link below in both Firefox and IE6/IE7 and you will see that IE is not adding the same margin for the image below the content H2 header as in Firefox.

The Best Flower Discounts (http://www.thebestflowerdiscounts.com/online-florists/bunches)

I have been playing with an IE-only stylesheet trying to doctor the relevant tags to get the image positioned properly but nothing is working (not even absolute position!). Would be grateful for some advice.

The relevant HTML code segment is:

<div class="post">
<h1 class="title">TEXT</h1>
<div class="entry">
<a href="#" target="_blank"><img class="merchant" src="#" border="0" width="220" height="78" alt="text"></a>


The relevant CSS code segment is:

.post { padding: 0 0 20px 0; }

.title { margin: 0; border-bottom: 2px solid #4A3903; }

.merchant { float: right; margin: 0 0 10px 10px; }

[FJbrian]

you're floating it to the right
plus what I think you mean to do is style the div "entry" instead of "merchant"

[Omicrontau]

I don't see why floating to the right would cause the image to be flush to the header. Could you explain this one?

As for the 'entry' class, the tag is superfluous. At any rate, I would think adding padding to this div would push the text in the div down as well so there would still be mismatch.

Interestingly I have tried to add both a margin and padding (not together though) and the image still hasn't budged. I tried the following:


.entry {
padding: 10px 0 0 0;
}



.entry {
margin: 10px 0 0 0;
}


Any thoughts?

[FJbrian]

I see overlapping in IE
Does the banner company use a z-index you have to almost counteract? OR can you absolutely position it?