Position:Fixed Breaks in IE9

position:fixed breaks in IE9

The most likely cause is that your page is being displayed in Quirks Mode.

Internet Explorer, more than any other browser, will screw up your page in Quirks Mode.

Press F12 to open the Developer Tools to find out which mode is being used.

If it is indeed Quirks Mode, the most likely reason is that you've forgotten to add a doctype as the very first line:

<!DOCTYPE html>

If you already have a doctype, there are other possible causes.

IE9 and Position Fixed

Try adding a doctype to make sure IE9 isn't going into quirks.

Position:Fixed and IE

Your mark-up does need a bit of work but you will get a better understanding as you get more experienced. Rather then use a negative z-index and have the image in a div at the bottom of your mark-up, another possible solution is to wrap your page in a wrapper div that is larger then your page and set the background-image to that of your sea lion and have it fixed and to the left.

See this updated, and now working version, JSfiddle: http://jsfiddle.net/84qAg/1/

Hope this helps and best of luck with it all.

IE9 clips fixed child of absolute border-radius

After doing a bit of testing, it seems like using javascript to handle that particular css property allows it to function properly.

Remove:

position: fixed;

and add somewhere on your page:

<script>    
    $(.fadeTopGradient).css({'position':'fixed'})
</script>

If you would like accomplish this with css alone, I'm not 100% sure what to tell you. Though I did see a question regarding position:fixed in IE9 asked before here: position:fixed breaks in IE9

I hope this helps.

How to center a “position: absolute” element in IE 9,10,11

<body>
<div class="container">
<div class="box">
</div>
</div>
</body>

CSS

.box{
    position: absolute;
    top:0;
    right: 0;   
    left: 0;
    bottom:0;   //specify all including bottom:0
    margin: auto;
    height:200px;
    width:200px;       
}

DEMO

Problem with IE position: absolute

Add left: 0px; as well, IE probably won't give it such default value:

<div style="position: absolute; top: 170px; left: 0px;">

I can't adjust position fixed

I like to use https://fixedposition.googlecode.com/files/jquery.fixedposition.1.0.0-min.js for this purpose, because this works easy and fine.

First include the .js file in the header of your website, and then use the followig code:

 <script>
        $(document).scroll(function(){
            if( !$('.navbar').length ) return;

            if (!$('.navbar').attr('data-top')) {

                // If already fixed, then do nothing
                if ($('.navbar').hasClass('navbar-fixed')) return;

                // Remember top position
                var offset = $('.navbar').offset();

                $('.navbar').attr('data-top', offset.top);
            }

            if ($('.navbar').attr('data-top') <= $(this).scrollTop()) {
                $('body').addClass('subnav-active');
                $('.navbar').addClass('navbar-fixed');
                $('#navbarStyleHolder').css("display", "block");
            }

            else {
                $('body').removeClass('subnav-active');
                $('.navbar').removeClass('navbar-fixed');
                $('#navbarStyleHoler').css("display", "none");
            }
        });
    </script>

Next just go ahead and replace .navbar with your div in which your nav is in, and then create a .css class with the formatting your fixed header should have (in my example code called .navbar-fixed ).

This script will automatically replace the .navbar class with the .navbar-fixed class when reaching the end of the .navbar div.

For example if you want to have it on top of the screen, use this css code:

.navbar-fixed {
position:fixed;
top:1;
}

Position:Fixed Breaks in IE9