Question

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)

Answer 1

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.