Welcome to WebmasterWorld Guest from 54.167.86.211

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)

Junior Member

5+ Year Member

joined:Sept 29, 2006
posts:55
votes: 0


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.

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

New User

5+ Year Member

joined:Nov 12, 2006
posts:15
votes: 0


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

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

Junior Member

5+ Year Member

joined:Sept 29, 2006
posts:55
votes: 0


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

Erdy.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members