Can anyone suggest a css hack for the css element position:fixed to work on IE 6. My trial layout works well on all browsers expect IE-6 . I understand that the obsolete IE 6 will not recognize position:fixed element. can anyone suggest any css hack.. using javascript or anything.. Thanks jinsona
You can use Javascript but it'll be all jiggiddy when people scroll. The usual way to fake it for IE6 is to have a 100% height container, and the thing in question set as a direct child of the body, and positioned absolutely. There's a wrapper of some sort around the whole rest of the page, also set to position: absolute. If you set t he page container to top: 0 left: 0 then you can set a higher z-index on the thing in question to make it sit above the page. I guess the question is, is this a thing or a part of a page like a header? There are a lot of ways for things like sidebars, headers and footers to be set to fixed for IE6. If it's a small graphic though, you have to more carefully set up your page.
I'm not sure if this will work for your application, but here is a quick tutorial that seems to work really well. http://web.tampabay.rr.com/bmerkey/examples/fake-position-fixed.html
Though it's talking about using conditional comments is semi-wasteful code-wise. The height:100% and overflow:auto on body can be sent safely to all browsers (heck, I usually have the height:100% set anyways!), and your fixed section only needs to have it's position changed for IE/earlier - so the CSS needed only needs to be: html, body { height:100%; overflow:auto; } #fixed { position:fixed; top:200px; left:0; } * html #fixed { /* lte IE6 */ position:absolute; } Code (markup): Just be warned - there is a MAJOR bug in this technique that is VERY hard to work around. If you try to position the element off the right side of the screen, or declare the element as 100% width, it does NOT take the scrollbar into account and your element will appear OVER the scrollbar in IE.
Hmmm, yeah I've found my fixed footer menu doesn't scroll horizontally when the screen is small enough to force a scrollbar. I didn't know there was a way around this. I tried overflow: auto on the footer itself, but this gives scrollbars even when unneeded and also a vertical one. : (
I've found I need to add some other things to the position: absolute part for IE6. Let's see, I need to open my page... now lemmee clean it up... this works, but IE6 had a hell of a time when the page got really long and the screen resolution was small (if the screen was 600x800 then sometimes the footer would stay in the middle which was the bottom of the viewport before scrolling...) * { margin: 0; padding: 0; } (other stuff...) html, body { height: 100%; } body { position: relative; background: #e1eef4 url(bggradient.gif) 0 0 repeat-x; } #footer { height: 2.5em; width: 100%; (IE wasn't letting it stretch all the way) position: fixed; z-index: 1000; bottom: 0; left: 0; background-color: #34769a; border-top: 1px solid #fff; } * html #footer { position: absolute; bottom: 0; left: 0; (this was needed as well) overflow: visible; top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight)); } #container { height: 100%; /*IE6*/ min-height: 100%; font: normal 1em/1.5em georgia, baskerville, times, "times new roman", serif; } Code (markup): The container holds the rest of the page. Footer is a direct child of body. <body> <footer></footer> <container> lalalalala... </container> </body> I needed more than just position:absolute on the footer for IE6. It seemed to not look at some of the properties from the fixed footer (while others, like width: 100%, it did). It will not scroll from side to side, bummer. The javascript in there is for IE6 and under to emulate a true fixed footer. It's worked so far, as I could only hope that most of those browsers either have Javascript turned on or a large enough screen that the browser can figure out where the footer is. The Javascript confuses the browser though-- it never knows where the end of the page is. it can only look to see how far from the top the viewport bottom is. So, it's like infinite. Hmmm, I'm not sure why I removed overflow: auto cause I think I did have it a few months ago. Anyway, since the rest of the page is 100% min-height, it's cool.