Currently dealing with a CSS issue that seems to be specific to Internet Explorer. I haven't encountered it in Firefox, Safari, or Opera during testing with IE 11.
The problem:
I've set the top margin of the website content/stage to around 2%, which works fine. However, when hovering over the first navigation point "people" (which has a drop-down menu), the main navigation/stage jumps to the top without leaving the margin as intended.
This issue also occurs when clicking on the second point "journal". The set margin is not respected there either.
The margins are maintained on other points of the main navigation unless you hover over the first point "people" again.
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;
}
/* Remaining CSS code here */
Any help and insights into resolving this issue would be greatly appreciated. Thank you!