CSS bug with margin (only in IE?)

Question

I am hanging in there a bit with a CSS problem/error, that seems to occur only in Internet Explorer. At least, I could not see it in Firefox, Safari and Opera up to now. I used IE 11 for the testing.

Error:

I have set the website content/stage to leave a margin of around 2% to the top, which works just fine, but as soon as you hover with the mouse over the first navigation point "people" (which has a drop-down menu), the main navigation/complete stage just jumps up straight to the top, not leaving any margin as it should do.

That also happens, if clicking on the second point "journal". In there it also does not respect the set margin.

On the other points of the main navigation the margin keeps respected. Well, until you hover over the first point "people" again, of course.

Website:

goo.gl/9YMkka

Code:

  html {
    margin: 0;
    overflow-y: scroll;
}
body {
    margin: 0;
    background: url(random_img.php) no-repeat top left fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    font-size: 1rem;
    font-family: 'PT Sans Narrow', Helvetica, Roboto, Arial, sans-serif;
    height: 100%;
}
#stage {
    margin: 1.5% auto 0 auto;
    padding: 0;
    min-height: 100%;
    max-width: 58.75rem;
    width: 100%;
    min-width: 20rem;
}
#obenlinks {
    margin: 0 0.2rem 0 0;
    line-height: 3.4rem;
    float: left;
}
#obenlinks a {
    display: block;
    line-height: 3.4rem;
    font-size: 1rem;
    color: #fff;
    text-decoration: none;
    background: rgba(210, 21, 21, .8);
    margin: 0;
    padding: 0 1.1rem;
    font-family: Dosis, Helvetica, Arial, sans-serif;
    font-weight: normal;
}
#obenlinks a:visited {
    color: #fff;
    text-decoration: none;
    background: rgba(210, 21, 21, .8);
    margin: 0;
    padding: 0 1.1rem;
}
#obenlinks a:hover {
    color: #eee;
    text-decoration: none;
    background: rgba(210, 21, 21, .99);
}
#obenlinks a:active {
    color: #fff;
    text-decoration: none;
    background: rgba(210, 21, 21, .8);
}
#obenmitte {
    margin: 0 0 0 0;
    background: rgba(255, 255, 255, .7);
    line-height: 3.4rem;
    overflow: hidden;
}
#obenrechts {
    float: right;
    margin: 0 0 0 0;
    line-height: 3.4rem;
}
#inhalt {
    background: rgba(255, 255, 255, .8);
    padding: 1rem 1.5rem;
    margin: 0;
}
#inhaltblog {
    background: rgba(255, 255, 255, .8);
    padding: 2.65rem 2rem;
    margin: 0;
}

@media screen and (min-width: 800px) {
#nav {
    display: block;
    float: left;
    margin: 0 auto;
    width: 100%;
}
#nav ul, div.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav li, div.menu li {
    float: left;
    position: relative;
}
#nav ul ul {
    display: none;
    position: absolute;
    left: 0;
    float: left;
    width: auto;
    z-index: 99999;
}
#nav ul.sub-menu {
    width: 100%;
}
#nav ul.sub-menu li {
    float: none;
    display: block;
}
#nav a {
    color: #333;
    display: block;
    padding: 0 1.1rem;
    text-decoration: none;
    font-weight: normal;
    background: rgba(255, 255, 255, .7);
    margin: 0 0 0 0.2rem;
    font-family: Dosis, Helvetica, Arial, sans-serif;
    font-size: 1rem;
}
#nav ul li:hover > ul {
    display: block;
}
#nav li:hover > a, #nav ul ul:hover > a {
    color: #bbb;
    background: rgba(255, 255, 255, .95);
}
#nav ul ul a {
    background: rgba(255, 255, 255, .7);
    text-align: center;
    line-height: 1rem;
    padding: 10px 10px;
    height: auto;
    margin: 2px 0 0 0.2rem;
}
#nav ul li.current_page_item > a, #nav ul li.current-menu-ancestor > a, #nav ul li.current-menu-item > a, #nav ul li.current-menu-parent > a {
    background: rgba(255, 255, 255, .99);
}
}

Thanks a lot in advance, guys. I hope, you can see the issue or even solution. :)

Answer 1

The root element needs to be given a minimum height, otherwise the 100% height of the body and the 1.5% top margin of the container element aren't clear. Simply apply the following:

html { min-height: 100% }

I added this rule both in the F12 Developer Tools as well as in the HTTP Response via Fiddler and confirmed that in both cases it resulted in a repaired layout in Internet Explorer 11.

This problem appears to be limited to IE 11. After testing http://remote.modern.ie, it appears our team has resolved the issue for future versions of Internet Explorer.