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! :)
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! :)