ansaurus

Question

Answer 1

A:

yes IE6 sucks. here's the hack...

_position: absolute;
_top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');

that basically tells IE6 to keep it absolutely positioned in the top left even as it scrolls. this should go under the rest of your css for the element so it over-rides it in IE6.

here it is for your left bar...

#leftBar {
position:fixed;
top:0;
left:0;
width:200px;
_position:absolute;
_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}

2009-07-02 13:55:11

I forgot to mention im using the underscore hack for IE6 in that code.

2009-07-02 13:56:36

Answer 2

+4 A:

Don't support IE6! The sooner people stop hacking sites about for IE6, the less traction it will have and the quicker it will die! Or, add this code after your first style block;

<!--[if IE 6]>  
<style type="text/css">  
#sidebar_right, #sidebar_left {  
position:absolute; /* position fixed for IE6 */  
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');  
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');  
}  
</style>  
<![endif]-->

The result isn't super-smooth, but it does work.

UPDATE

I wasn't too clear on how this should be used; simply add the id (or class) of any elements that have "position:fixed" to the declaration list at the start of the above block and they will behave themselves in IE6.

MatW 2009-07-02 13:55:16

Works pretty good! But what if I have a header? Can it be modified to go to the top when the header has been passed?

Cudos 2009-07-02 14:04:15

"Don't support IE6" is easy to say (I say it often), but sometimes you just don't have the choice.

GoodEnough 2009-07-02 14:06:57

A header should work just fine, as this code simply fixes position:fixed for IE6 rather than messing with your layout in any other way. It is a hack though, so you may find situations where it breaks; it really will depend on your final layout.

MatW 2009-07-02 14:19:14

@Crossbrowser. I know what you mean, but you always have a choice... Unless a client is holding a gun to my head or it's for an IE6 specific intranet, I'll argue the case until my voice breaks! Buinesses switching browsers is the only thing that can kill IE6, and we are the only people in a position to persude businesses to do so. The best argument is that complex layouts require coding once (correctly, to standards) then once again to make it work for IE6; remove IE6, and substatially reduce the time (ie cost) of development.

MatW 2009-07-02 14:26:30

Yes, just ignore 15% - 20% of the site´s visitors, that seems like a solid business idea.

jeroen 2009-07-02 16:34:57

@jeroen, that's a *massive* over generalisation. How can you say what browsers his, mine, or anyone else's vistors use?! Nevermind what effect that 20% would have on the business. If 20% of your users are IE6, can they be persuaded to switch? (ie they aren't stuck with whatever their company uses) If so, why not make the suggestion to them rather than complaining about IE, then building an infrastructure that supports it?

MatW 2009-07-02 17:00:42

To clarify, I'm not saying that supporting IE6 is wrong. I'm simply making the observation that if we put the same amount of effort into educating our clients and users about how shoddy IE6 is, than we put into doing battle with IE6 in the first place, then the problem would go away.

MatW 2009-07-02 17:03:42

@MatW: Well, he *did* state in the question that he needed IE6 support (as one of the few ones that do) and on different sites, ranging from embassy's and travel agencies to psychologists and wineries, I see 15% to 20% of IE6 use, with that number going up to 40% on local sites here in South America (where almost all windows versions are illegal...). Anyway, I just think your solution is fine, but the first paragraph is very wrong.

jeroen 2009-07-02 19:12:02

We can probably all agree that IE6 isa nightmare for developers. The problem in this matter is that the customers demands that it works in IE6. IE7+ and all other browsers has nice solutions.

Cudos 2009-07-03 13:52:31

@matW, it's impossible in some cases not to support IE6. I'm working on a big web app and our main client (2000 people using the app) is using IE6. We have no way to tell them to upgrade (they need IE6 to use some old intranet app), especially just for our app ("Oh hai, mind spending more money just for us? kthxbai")

marcgg 2009-11-24 15:07:00

Answer 3

A:

Found this solution which I tweaked ( Basically the lines I changed was: $('#sidebar_left').css('top',document.documentElement.scrollTop); ):

// Editing Instructions
// 1. Change '#your_div_id' to whatever the ID attribute of your DIV is
// 2. Change '175' to whatever the height of your header is, if you have no header, set to 0

/********************************
*   (C) 2009 - Thiago Barbedo   *
*   - [email protected]        *
*********************************/
window.onscroll = function()
{
    if( window.XMLHttpRequest ) {
        if (document.documentElement.scrollTop > 299 || self.pageYOffset > 299 && document.documentElement.scrollBottom > 100) {
            $('#sidebar_left').css('top',document.documentElement.scrollTop);
            $('#sidebar_right').css('top',document.documentElement.scrollTop);
        } else if (document.documentElement.scrollTop < 299 || self.pageYOffset < 299) {
            $('#sidebar_left').css('top','299px');
            $('#sidebar_right').css('top','299px');
        }
    }
}

It jitters and looks bad, but work on all browsers including IE6.

Cudos 2009-07-03 13:55:22

Answer 4

A:

Hi,

I recently wrote a jQuery plugin to get position:fixed working in IE 6+. It doesn't jitter on scroll, it looks at capability (not user-agent), works in Internet Explorer 6, 7, 8.

If you use strict mode in IE7+ position:fixed will be honoured, but by default IE7+ operates in Quirks Mode. This plugin checks for browser capability, and if it doesn't honour position:fixed, then it implements the jQuery fix.

http://code.google.com/p/fixedposition/

Something like this may work for you:

$(document).ready(function(){
   $("#chatForm").fixedPosition({
      debug: true,
      fixedTo: "bottom"
   });
});

You may need to make some minor CSS adjustments to get it working for your code. I'm working on "offset" values as options as we speak.

Chris Iona 2010-01-10 02:10:38

ansaurus

tags:

views:

answers:

IE 6 vs. position:fixed

related questions