Designers should have faced with the problem of creating cross-browser designs. We have to serve to all of the visitors. Some may use Mozilla, some Internet Explorer 6 or IE7.

Usually, problem is related to IE6’s rendering engine.  One of the most common problem with IE6 is that it doesn’t render the negative margins as IE7 and Mozilla does. Negative margins is rendered hidden out of the layer in IE6.  Setting overflow to visible does not work and you go crazy.

The work around, making the negative margins visible, is so simple, it is even one of the simplest work arounds of the problems in IE6. Just add position:relative to your element with negative margins. This is it. Enjoy.

position:relative