IE8 CSS Complications

Question

Greetings,

I have a php site that was working fine as of the start of the year. Then a patch came out for IE8 which caused the CSS I had to malfunction.

Is this a know problem or an isolated issue?

My main problem stems from trying to lock a header into place while allowing the body to be scrollable with:

position: fixed;
overflow: scroll;
top: 135px;
left: 0px;

One of my colleagues has also encountered the same issue as I have.

Any assistance would be greatly appreciated.

Thank you,

Jordan Trulen

.belt
{
    position:fixed;
    top: 0px;
    left:0px;
}
.header-table
{
    position:fixed;
    top:65px;
    width:100%;
}
.header
{
    position:fixed;
    height:40px;
    width:98%;
    top:95px;
}
.body
{
    position:fixed;
    overflow:scroll;
    height:74%;
    width:99%;
    top:135px;
}

Answer 1

Why are you using position fixed on the "content" area (i assume thats the "content" area as scroll on a header doesnt make much sense)? Apply position: fixed; to the header instead.

Answer 2

You're not giving us any html or a link to see what's up.

But there's a key difference in using position:fixed and position:absolute.

• Fixed is used when you don't want the container to scroll with the page, but remain at that position no matter how much you scroll the remaining page. This is good for headers that should always be visible.
• Absolute should be used when you just want it to be fixed in relation to the surrounding content.

And you're using overflow:scroll; in a fixed container, which only in extremely rare cases makes sense. I think you problem is with the overflow:scroll; being on the wrong tag. It only has to do with the content of that tag being limited to the width and height (which you haven't even specified!) of the container. If the content overflows that width and height, scrollbars are inserted ON the container.