Image hanging over edge of div in IE

[dereko]

I'm trying to set negative margins for div inside a different div which works fine in firefox at my first attempt.

http://www.jeebers.com/1time/

but when you view it in ie it shows up completely different.

I seem to remember a way to force both browsers to work the same way but i'm not sure if that will fix my problem...


Any ideas?

[Paul O'B]

Just add position:relative to give it a stacking context and it gets drawn on top correctly.

#screenshot img{
margin-top: -9px;
margin-left: 20px;
position:relative;
}

[dereko]

nice one!

now to figure out how to make it hang over the right edge of the div....

[Paul O'B]

I didn't notice that

You will need to do it like this for ie:

Remove the left margin from the image and apply a negative margin to the float instead.

#screenshot {
 float: right;
 width: 463px;
margin-right:-20px;
}
#screenshot img{
 margin-top: -9px;
/*margin-left:20px;/remove this*/
position:relative;
}

[dereko]

thank you very much!