Why don't negative margins work in IE 7?

Question

I declared a negative margin on a link, but it doesn't work on IE 7.

#search a {
    color: #E5E5E5;
    text-decoration: none;
    font-weight: bold;
    float:right;
    margin-top:-20px; // this is not working on ie, only mozilla
}

Is there a fix for this?

Answer 1

{position: relative;} may be required, as already noted, but you may have another problem:

In general, IE7 will not draw the part of an element that protrudes outside of its parent container if negative margins is the technique used to pull the element out that way (though it will respect other means of effecting protrusion, like {overflow: visible}).

This is a "hasLayout" -related, IE bug , and a thorough treatment of it can be found at "Has Layout: Negative Margin Bug.

As the above-cited reference notes, there are ways of coaxing IE7 to paint the part of an element with negative margins that protrudes outside its parent, but it involves "... to not use any properties that give an element layout." and that is potentially restrictive to other design techniques you'd like to use, and has other side effects (again, see cited reference).

But to answer your question: for the workaround, see the list of properties that induce "hasLayout", (like position, height and width -- yikes!) and be sure none of them are applied to your container.