Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Negative top margin not working in IE 8 or 9

Tags:

I have a div with margin-top:-200px. I want the div to move up/behind the div above it.

Works great in all browsers except IE so far. margin-top:200px works, so I know it's not a collapsing margin issue.

Is there a bug I am not aware of here?

like image 207
SideDishStudio Avatar asked Mar 31 '11 22:03

SideDishStudio


People also ask

Can we give margin top in negative?

It is possible to give margins a negative value. This allows you to draw the element closer to its top or left neighbour, or draw its right and bottom neighbour closer to it.

Why margin top is not working in a tag?

This issue is known as Margin Collapse and happens sometimes between top and bottom margins on block elements. That's why the margin doesn't work on the p tag. To make it work here an option is to use padding-top on the p tag. And on the a tag the margin doesn't work because it's an inline element.

Is it OK to give negative margins CSS?

Negative paddings are not allowed (and don't work) in css, only negative margins.


1 Answers

IE doesn't like negative margins and doesn't render them properly. Position your elements relatively or absolutely and use top: -200px instead.

Note: positioning them may change the layout significantly and you may have to rework your styles.

like image 199
biggles Avatar answered Oct 02 '22 20:10

biggles