Question

When running the following layout in compatibility mode, the content disappears behind the fixed header. Is there a way I can prevent this from happening?

See the jsfiddle here and switch between compatibility mode in IE. The Layout works fine in chrome and IE9 when not in compatibility mode.

Header css is basically:

#headerContainer
{
    position: fixed;    
    top:0px;   
    z-index:999;
    background:green;
    width: 100%;
}

And content css is:

#container{
overflow:hidden;
padding-left:480px; /* The width of the rail */
margin-top: 135px;
background: red;
}

Its a fixed-fluid layout (left rail is fixed) with a fixed header. When scrolling down I want the content of the page to disappear below the header.

Answer 1

Quick fix for IE compatibility mode:

#container{
    overflow:hidden;
    padding-left:480px; /* The width of the rail */
    margin-top: 135px;
    background: red;
    *position:relative;
    *top:135px;
}

I’ve used CSS hack (with *) for IE7.
Fiddle: http://jsfiddle.net/keaukraine/phPAN/