PDA

View Full Version : IE6 Fixed Position Javascript help needed



Rayzur
05-27-2009, 12:03 AM
Hi,
To begin with I know absolutely nothing about JavaScript. I am a CSS coder but I have a situation here where I can't seem to get expressions to do the job for me in IE6. I am well aware of the fact that IE6 does not support fixed positioning. I have made a layout that uses fake fixed positioning through position absolute in IE6 for the footer and header and that is working great.

In order to do that I have removed the scrollbars from the body with overflow:hidden and now the wrapper has become the root element for IE6. Within this wrapper div I have a div named #main which is 900px wide and centered up. I need the right sidebar to position from that div and be fixed in IE6 as it is in modern browsers.

The layout can be found here and the stylesheet is internal -
Cross Browser "Fixed Header-Footer-Sidebar" (http://www.css-lab.com/test/x-brwsr-fix-hd-ft-side.html)

There is a conditional comment for the IE6 styles towards the bottom and the #right-wrap and #right-inner are the rules that need some javascript help -

<!--[if IE 6]>
<style type="text/css">

html {/* fix jitters when using expression*/
background-image: url(fake-image.jpg);
}
html,body {
overflow:hidden;/*remove scrollbar from IE6*/
padding:0;
margin:0;
}
#wrapper { /*This has essentially become the root element for IE6 now*/
overflow:auto;/*IE6 fake fixed (works off a bug where overflow:auto is set on a parent)*/
width:100%;
height:100%;
background: #BBB;/*same as body BG in main stylesheet*/
border:none;
}
#innerwrap {
position:absolute;
overflow-y:scroll;
width:100%;
height:100%;
z-index:1;
}
#main { /*IE picks up the width from the main stylesheet*/
margin:0 auto;
width:900px;
height:100%;
border-left: 1px solid #000;
border-right: 1px solid #000;
position:relative; /*establish containing block for AP #right-wrap*/
}
#right-wrap {
position:absolute;/*javascript help here for IE6 please*/


}
#right-inner {
position:fixed;/*javascript help here for IE6 please*/


}
#header {position:absolute;} /*IE6 fake fixed (works off a bug where overflow:auto is set on a parent)*/
#footer {position:absolute; bottom:-1px;}

#innerhead,
#innerfoot {margin-right:16px;}/* keep it off the scrollbar in IE6*/
</style>
<![endif]-->

I would think that this would be a piece of cake for some of you JS gurus. I was looking through This Thread (http://www.dynamicdrive.com/forums/showthread.php?t=31661) and it looks like something from post#7 would be just what I need if I can get it to position from the #main div rather than the body.

Thanks for your interest in helping out! :)

Rayzur
05-28-2009, 07:56 PM
Let me see if I can make this a little simpler. I can alter the html around a little bit and get it to where the script just needs to calculate top and bottom positions.

Basically what I am looking for is a script that will the following with the right sidebar div - (just for IE6, position:fixed will take care of other browsers)

1) Set the top position according to the header height
2) Set the bottom position according to the footer height
3) Keep the div fixed so that it does not scroll with the left content

If anyone knows of a script that can do this would you please point me in that direction. It would be similar to an "equal height column" script except that it would make it fixed also.

Thanks again