1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need IE-6 CSS hack for position:fixed element..

Discussion in 'CSS' started by jinsona, Apr 2, 2008.

0
  1. #1
    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
     
    jinsona, Apr 2, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    Stomme poes, Apr 2, 2008 IP
  3. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #3
    ChaosFoo, Apr 3, 2008 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    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.
     
    deathshadow, Apr 3, 2008 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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. : (
     
    Stomme poes, Apr 3, 2008 IP
  6. jinsona

    jinsona Well-Known Member

    Messages:
    1,066
    Likes Received:
    93
    Best Answers:
    0
    Trophy Points:
    140
    #6
    Thanks guys.. I am trying them out.. but the position:absolute hack doesn't seem to work for me..
     
    jinsona, Apr 3, 2008 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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.
     
    Stomme poes, Apr 4, 2008 IP