Float+Negative Margin Problem in IE6

[Ryura]

Hi all,
I'm having a problem in IE6 only. Basically, I have a div with an image in the beginning. This image is floated right so text wraps around and then has negative margins to move it past the top right corner. In all browsers this looks correct, except the image gets cut off in IE&. I suppose this is because of the incorrect box model, and I think I need to set the opposite side's margins to offset it but I'm not sure what to.

Here's a picture to illustrate my problem:
<snip>

Here's the relevant code:

<div id="textback">
<img src="images/content/headingimg-trans.png" alt="" /><p class="first">-dummy text-
</p><p>
-dummy text-
</p><p>
-dummy text-</p></div>

#textback {
margin: -45px auto 0 auto;
float: left;
padding: 0;
width: 433px;
height: 482px;
background: url(../images/content/textback-trans.png);
position: relative;
left: 52px;
z-index: 30;
}

#textback img {
position: relative;
display: inline;
margin: -33px -104px 0 0;
padding: 0;
width: 312px;
height: 359px;
z-index: 999;
float: right;
clear: left;
}

[edited by: swa66 at 11:48 pm (utc) on Oct. 21, 2008]
[edit reason] sorry, no personal URLs [/edit]

[swa66]

To be honest I don't understand exactly what you want to achieve, so helping becomes hard.

Next the code you have: position:relative (so you could move it about, but you don't), negative margins, display: inline (so it acts as if it were text), and floated left all at the same time ...

I'm afraid I'd need to reread the CSS specs to even figure out what the browser would need to do with all of that at the same time. I'd not expect IE to get what you meant to do at all. Let's not forget that it's not even supporting all of CSS1 correctly.

My best guess: forget the code you have, or at least take out the stuff that's confusing the rest of us. Try to put in words where you want it, and then go straight for that. And to fix IE doing the wrong thing: please use conditional comments so only the version that needs it sees it.

[Ryura]

All the extra (specifically,display inline, clear left, and position relative) are going to be removed. Most of those are just things I forgot to take out after doing some testing for IE6 or for old code.
I'd like to use pictures because it's hard to explain, but that's apparently not allowed.

Here's some cleaned up code:
<div id="textback">
<img src="images/content/headingimg-trans.png" alt="" /><p class="first">-dummy text-
</p><p>
-dummy text-
</p><p>
-dummy text-</p></div>

#textback {
margin: -45px auto 0 auto;
float: left;
padding: 0;
width: 433px;
height: 482px;
background: url(../images/content/textback-trans.png);
position: relative;
left: 52px;
}

#textback img {
margin: -33px -104px 0 0;
width: 312px;
height: 359px;
float: right;
}

The use of negative margins and position: relative in #textback is because of text wrapping issues in FF2 iirc. I know there's a reason I used both.

My predicament is this: I need to move the img in #textback past the borders of #textback, because it is supposed to look like a picture sloppily placed on top of a piece of paper. This is easy to achieve, but I also need the text to wrap around the picture. Thus I must use negative margins for #textback img combined with float: right. Using position: relative here makes the text wrap around where the image used to be in at least 1 common browser.

Now, this works fine in all browsers except IE6. The text still wraps around the image, and the image is where it's supposed to be. But at the point where the image goes past the borders, it suddenly disappears. Therefore I only see about 25% of the image.

I read up on this problem on some websites - googled something like IE6 float negative margins and found the solution was to move it using both position: relative AND negative margins in order to account for IE6's broken box model. But I'm not sure on the exact numbers I need to use - I've been able to make the image fully appear but not in the right place. I was hoping someone on here would have experience with this and be able to help me.