Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Negative Margins Clipped in IE6

Why do I need extra code for IE6?



11:47 am on Nov 10, 2006 (gmt 0)

5+ Year Member

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

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




1:08 pm on Nov 12, 2006 (gmt 0)

5+ Year Member

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,



1:04 pm on Nov 13, 2006 (gmt 0)

5+ Year Member

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



Featured Threads

Hot Threads This Week

Hot Threads This Month