Fixed positioning in internet explorer?

Question

I just wrote a sample page with a corner banner and tool tip. Everything is working just fine with firefox. But in IE things are not working correctly. I surfed the internet and found that IE doesn't support position: fixed.
So does anyone know how to work around this problem ?
Here is my source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>

    <style type="text/css">
 .tooltip {
    width: 200px;
    position: fixed;
    top:auto;
    bottom:70px;
    right:70px;
    left:auto;
    font-family: Verdana, Geneva, sans-serif;
    font-size: xx-small;
}
#cornerbanner {
    position: fixed;
    top:auto;
    left:auto;
    right:0px;
    bottom:0px;
}
    .tooltip .tooltip_top {
    background-image: url(images/Box_BG_01.png);
    height: 34px;
    background-repeat: no-repeat;
    background-position: center top;
    line-height: 45px;
    text-align: right;
    padding-right: 30px;
    vertical-align: text-bottom;
    font-size: xx-small;
    font-weight: normal;
    overflow: hidden;
}
body {
    background-color: #F90;
}
.content p {
    font-family: Verdana, Geneva, sans-serif;
    color: #000;
    font-size: x-small;
    text-align: justify;
    padding: 15px;
    border: 1px solid #FFF;
}
.tooltip .tooltip_top a {
    text-decoration: none;
    color: #333;
}
    .tooltip .tooltip_con {
    background-image: url(images/Box_BG_03.png);
    background-repeat: repeat-y;
    padding-right: 20px;
    padding-left: 20px;
    display: block;
    clear: both;
    text-align: justify;
    letter-spacing: normal;
}
.content {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
}
    .tooltip .tooltip_bot {
    background-image: url(images/Box_BG_05.png);
    height: 24px;
    background-repeat: no-repeat;
    background-position: center bottom;
}
    .tooltip .tooltip_con #tooltip_link {
    text-align: right;
    color: #666;
    text-decoration: none;
    margin-top: 10px;
}
    .tooltip .tooltip_con #tooltip_link a {
    color: #666;
    text-decoration: none;
}
    .tooltip .tooltip_con img {
    float: right;
    margin-right: 5px;
    margin-left: 5px;
}
    </style>
    <script src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $(".tooltip").fadeOut(0);
          $("#cornerbanner").mouseover(function(){
          $(".tooltip").fadeIn("slow")
          });
          $("#close_tooltip").click(function(){
          $(".tooltip").fadeOut();
          });
        });

    </script>
    </head> 
<body>
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel ligula
        leo, ac aliquet ante. Sed ut elit et purus ultricies ornare. Sed eu justo sem.
        Suspendisse convallis elementum eros, vitae consequat lorem sollicitudin vitae.
        Phasellus bibendum, libero ac semper lobortis, orci tellus lacinia nisl, eget
        luctus risus felis sed dolor. Phasellus commodo imperdiet neque vitae elementum.
        Ut iaculis vestibulum velit cursus blandit. Cras ornare iaculis velit, vitae
        malesuada mi mattis tempor. Ut consequat dapibus massa eget scelerisque. Quisque
        sed suscipit sapien. Duis metus urna, consequat tempor feugiat sit amet, placerat
        non lorem. Integer eget urna elit, et ullamcorper libero. In iaculis aliquet</p>
            <div id="tooltip_link"><a href="http://www.google.com">Click here</a></div>
            </div>
            <div class="tooltip_bot"></div>
    </div>
</body>
</html>

You might have a better response over on doctype (http://www.doctype.com). — David Thomas, Jan 28 '10 at 01:03

score 2 · Answer 1 · answered Jan 28 '10 at 01:11

Do you mean "doesn't work in IE6"? The following fixed position CSS works fine for me to anchor a footer to the bottom of a page in IE7 and IE8:

 Div.Footer { background-color: #f8f7ef; position:fixed; margin: 0px; padding:4px; bottom:0px; left:0px; right:0px; font-size:xx-small; }

score 1 · Answer 2 · answered Mar 18 '13 at 03:17

position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
right: expression(0+((e=document.documentElement.scrollRight)?e:document.body.scrollRight)+'px');

This would float the element in the very top right corner. If you wanted to position it elsewhere, change the 0 in expression(0+( for either value

Internet Explorer 6 understands position:absolute, which is a good basis for this working. The similarity between absolute and fixed positioning is that it removes it from the flow of the normal content. So then you use the top and right positionings normally, with a little bit of javascript in there. I'm not sure how it reads the javascript. But who cares. It works ;)

Kieran · Accepted Answer · 2013-03-18T03:09:48.610

1

The problem is that the ~~most popular~~ most used browser - Internet Explorer for Windows - does not understand it, and instead of reverting to position: absolute; which would be better than nothing, it reverts to position: static; as specified by the CSS standard. This has the same effect as having no position at all. Note that IE 7 from beta 2 upwards does support position: fixed; (if you use a document type declaration that triggers strict mode) so I will exclude IE 7 from this fix.

edited Mar 18 '13 at 03:09

answered Jan 28 '10 at 01:06

Kieran

17,572
7
45
53

"Most popular" is not the same as "most used". IE is the most used for the moment. – Rob Jan 28 '10 at 01:49
I agree rob. I hate it as a developer. Even as a browser itself it is sub par. Once government and large corporations can commit to using something better and more feature rich the stats will change. – Kieran Jan 28 '10 at 02:31

score 0 · Answer 4 · edited May 23 '17 at 12:13

0

You can sort of hack it in using JavaScript/jQuery.

E.g. What is the simplest jQuery way to have a 'position:fixed' (always at top) div?

edited May 23 '17 at 12:13

Community

1
1

answered Jan 28 '10 at 01:33

Paul D. Waite

96,640
56
199
270

Fixed positioning in internet explorer?

4 Answers4