Negative Top Margin Not Working in Ie 8 or 9

Negative top margin not working in IE 8 or 9

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.

Vertical negative margin not working in IE8?

About Conditional Comments. How To Create an IE-Only Stylesheet.

Try to set style only for IE8 with negative top coordinates:

<!--[if gte IE 8]>
<style>
.container { top: -164px; }
</style>
<![endif]-->

Negative Margin not working in IE

Try to use :)

.jNav ul li + li {
    border-left: solid 1px #ccc;
    /*margin-left: -1px;*/
   position: relative;
   left: -1px;
}

Or, you can use like this (no need to re-layout the css):

.jNav ul li + li {
    border-left: solid 1px #ccc;
    margin-left: -1px;
   position: relative;
   zoom: 1;
}

Negative margins: can they work in IE7 and IE8?

ok fixed it,
i reduced the line height on my ------'s

tag,
the line height acts like a top margin...

thanks guys

How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

Negative margins are valid in css and understanding their (compliant) behaviour is mainly based on the box model and margin collapsing. While certain scenarios are more complex, a lot of common mistakes can be avoided after studying the spec.

For instance, rendering of your sample code is guided by the css spec as described in calculating heights and margins for absolutely positioned non-replaced elements.

If I were to make a graphical representation, I'd probably go with something like this (not to scale):

The margin box lost 8px on the top, however this does not affect the content & padding boxes. Because your element is absolutely positioned, moving the element 8px up does not cause any further disturbance to the layout; with static in-flow content that's not always the case.

Bonus:

Still need convincing that reading specs is the way to go (as opposed to articles like this)? I see you're trying to vertically center the element, so why do you have to set margin-top:-8px; and not margin-top:-50%;?

Well, vertical centering in CSS is harder than it should be. When setting even top or bottom margins in %, the value is calculated as a percentage always relative to the width of the containing block. This is rather a common pitfall and the quirk is rarely described outside of w3 docos

Browser, safari/IE negative margin not working

Get rid of the CSS

div#thumbnails {
text-align:center;
}

and also get rid of your margin-left: -115px for your images and you will have something that works in both browswers.

---

Related Topics