Css fixed display not working in IE6

Question

I'm trying to duplicate the getsatisfaction tab kind of effect - it works fine in IE7 and Firefox and almost every other browser but its all messed up in Explorer 6 - I hate IE6 but heck its the most commonly used browser - my tab is now instead of being overlayed on the side is sitting at the top corner of my page pushing all the page contents to the bottom.

The tab is just a link with this css styling applied:

a#feedback_link
{
  position:fixed; top:40%; 
  right:0px !important; 
  z-index:9999999; 
  text-decoration:none; 
  background-color:#2E8CDC; 
  padding:0px; 
  border:0px;
}

Answer 1

display: fixed is not supported in IE6

see: http://tagsoup.com/cookbook/css/fixed/ for some workarounds to this problem

Answer 2

IE6 ignores position:fixed. It's a known defect. One possible (but somewhat ugly) workaround is to use JavaScript expressions in your CSS file like so:

a#feedback_link
{
    position:absolute; 
    top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight*0.4));
    ...

Use conditional comments to limit this declaration to IE6 only.

Answer 3

display: fixed is not supported in IE6.

If you want to make it work, I suggest trying IE7.js or IE8.js, which are a compatibility patch (implemented through JavaScript) for IE6 that enables support for display: fixed.

You can see an overview of what IE7.js does here:

http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html

Answer 4

Well, before I start: IE6 is actually the most THINK TO BE commonly used browser. Let the numbers talk.

The issue is probably with the "fixed" positioning. change it to absolute (and change the code if needed) or use conditional css to make a special css for ie6 only.

see some samples here: http://snipplr.com/view/2952/ie6-fixed-position-fix/