CODEWITHSUNDEEP
cssinternet-explorer
SideDishStudio
SideDishStudio

Reputation: 705

Negative top margin not working in IE 8 or 9

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?

Upvotes: 25

Views: 35595

Answers (5)

9ete
9ete

Reputation: 3762

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; }

Upvotes: 1

Koen van Hees
Koen van Hees

Reputation: 31

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;
}

Upvotes: 3

user3206814
user3206814

Reputation: 41

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

Upvotes: 2

biggles
biggles

Reputation: 3051

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.

Upvotes: 26

Abdul Wahid
Abdul Wahid

Reputation: 167

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

Upvotes: 14

Related Questions