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.
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.