Negative Margins Clipped in IE6

Why do I need extra code for IE6?

[erdy]

Why is it that when I use negative margins on an image in IE6 it clips the image so you only see the part of it that is in the containing DIV?
I understand that

position: relative;

on the img selector sorts this out, but how? is it just an unexplainable quirk?

You also need to put in

display:block;

on the img selector which I also don’t understand.
If anyone could explain these hacks to me I would be very grateful.

Thanks

Erdy.

[yuval_raz]

hi erdy,
this is yet another problematic IE rendering bug. it caused me a nasty headache when i tried giving an element negative top margins while using a png background (links didn't work when position: relative; was given).

had to re-write the whole code...

if this is the only element in the flow you can also use the position: relative and give it negative offsets instead of negative margins.

about the display: block for the image tag - it comes in handy when you understand that IE render images as text, and leaves some space at the bottom for the "big" letters (q, g etc'). when giving the element the display: block; property you turn the image tag into a block type element, thus aborting IE's abuse of the image tag.

i hope this helps,

yuval

[erdy]

This does help.
Thanks for the explanation about the Img tag.

Erdy.