Negative top margin not working in IE 8 or 9

Question

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:

Answer 1

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.

Answer 2

In order to support negative margins in IE, I've fixed similar issues with display: table;. Other fixes like zoom: 1; and position: relative; don't always work (at least in my experience). If you only want to add this style to IE, I'd suggest using https://modernizr.com/

// using comment to show that .no-cssreflections belongs to the html tag
/*html*/.no-cssreflections .container { display: table; } 

Answer 3

give position as relative. inline style is advisable. It may give some problem if you use external css.

Answer 4

If the above doesn't help: make sure there's a div around your offending div. Now add a width of 100% to the offending div and float it to the left. Like this. Got rid of all my negative margin ie woes...

div.container {}
div.offender /*inside div.container*/ {
  width: 100%;
  float: left;
  margin-bottom: -20px;   /* ie fix */
  zoom: 1;                /* ie fix */
  position: relative;     /* ie fix */
  display: block;
}

Answer 5

Negative margin hide the div… Here is trick use zoom:1, position: relative

Problem:

.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
}

in IE red area of toolbar div hide itself. even we are using zoom: 1. to get rid of this problem we need to add position: relative too.

Solution:

so your css class will become

.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
zoom: 1;
position: relative;
}

http://trickyclicks.com