CODEWITHSUNDEEP
csshtmlinternet-explorer-8css-position
René Stalder
René Stalder

Reputation: 2546

IE8 fixed position top & bottom resize bug

Based on my CSS, all Browsers including IE7 show my bottom bar correct and fixed, all the time.

.bottom-fixed {
    position: fixed;
    bottom: 0;
    margin-left: -235px;
    min-width: 1160px;
    max-width: 130em;
    width: 100%;
}

However there is something strange in IE8. If you resize the browser window height with help of your right corner at the bottom (the way you can change a windows width and height at the same time), all is fine.

But if you resize the window height grapping the top or bottom of your browser window, the bar/div stuck at the position like it would when position was absolute instead of position: fixed.

Any idea how to fix that?

(Using Doctype for HTML5)

Upvotes: 4

Views: 4010

Answers (4)

ali.b.y
ali.b.y

Reputation: 21

for fixed position in IE 8 - , DOCTYPE is very very important.

one of:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

or

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

or

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

or

<!DOCTYPE HTML>

And its very very important that those be in first line.

Upvotes: 0

Jazzy
Jazzy

Reputation: 6129

Had the same issue, but the fix in my case was that the parent had position: relative. Once I removed that, this issue went away.

Upvotes: 0

Vadim
Vadim

Reputation: 1178

There is another solution: setting height explicitly on the parent element. For example height: 1% or height: 100%.

Upvotes: 0

Ren&#233; Stalder
Ren&#233; Stalder

Reputation: 2546

I couldn't fix that with the parent float solution from this thread Umer mentioned.

So I fixed it with a simple Javascript script which applies position: fixed all the time when the window gets resized.

HTML

<!--[if IE 8 ]>
    <script type="text/javascript">
        $(window).resize(function () {
            ApplyPositionFixed();
        });
    </script>
    <![endif]-->

Javascript

function ApplyPositionFixed() {
    // Check if element exists
    if ($("#bottom-bar-content").length) {
        $(".bottom-fixed").attr('style', 'position: fixed;');
        console.log("Window resized");
    }
    else {
        console.info("No element changes on Window resize");
    }
}

However. I'm ready for better solutions.

Upvotes: 1

Related Questions