Is there a solution to prevent content from disappearing behind a fixed header when running a layout in compatibility mode?
To see the issue, visit the jsfiddle here and switch to compatibility mode in Internet Explorer. The layout behaves properly in Chrome and IE9 when not in compatibility mode.
The CSS for the header is as follows:
#headerContainer
{
position: fixed;
top:0px;
z-index:999;
background:green;
width: 100%;
}
And for the content:
#container{
overflow:hidden;
padding-left:480px; /* The width of the rail */
margin-top: 135px;
background: red;
}
This layout features a fixed-fluid design with a fixed left rail. When scrolling down, the goal is to have the content disappear below the header.