0

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.

woggles
  • 7,444
  • 12
  • 70
  • 130
  • So you want it to go over the header? – Kyle Sep 05 '12 at 13:13
  • Nope I want the header to remain fixed and the content to disappear below it when scrolling - that's how it behaves when compatibility mode is off – woggles Sep 05 '12 at 13:15

1 Answers1

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/

keaukraine
  • 5,315
  • 29
  • 54