Forum Moderators: not2easy
The code is as follows:
<style type="text/css">
html, body{
margin:0;
background-color:#E6F5C5;
height:100%;
}
body {padding:0 10px 0 10px; border:0; overflow-y:auto;
}
* html{
overflow-x: hidden;
}
* html div#body{
height:100%;
}
* html div#page{
height:100%;
}
* html #menu {
position:absolute;
}
#page {
margin:0 0 0px 210px;
width:600px;
height:100%;
padding:10px;
padding-top:100px;
}
.bodyText {
font:16px "Trebuchet MS";
font-weight: 500;
color:#734E15;
line-height:20px;
}
div#left-sidebar{
position:absolute;
top:0;
left:0;
width:200px;
height:100%;
background-color:#7f994d;
background-image:url(images/greybar.jpg);
}
div#right-sidebar{
margin:0;
padding:0 0 0 0;
position:absolute;
top:0;
right:0;
width:100px;
height:100%;
background-color:#7f994d;
background-image:url(images/greybar_sml.jpg);
}
div#header{
position:absolute;
top:0;
left:200px;
width:100%;
height:85px;
background-color:#7f994d;
background-image:url(images/greybar_top.jpg);
}
@media screen{
body>div#header{
position:fixed;
}
body>div#left-sidebar{
position:fixed;
}
body>div#right-sidebar{
position:fixed;
}
}
.style1 {font-family: "Trebuchet MS"}
.style4 {color: #734E15}
.style3 {font-family: "Trebuchet MS"; color: #734E15; font-size: 12px}
a:link {
color: #734E15;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #734E15;
}
a:hover {
text-decoration: underline;
color: #FF9933;
}
a:active {
text-decoration: none;
color: #ff9933;
}
#menu {
display:block; top:0px; left:0px; width:200px; height: 100%; position:fixed; background:url(images/greybar.jpg);
}
.clear {
clear:both;
}
</style>
I know this is a little messy as I have combined two bits of code from other sources to make it work, so I hope the "CSS Police" won't pick me to pieces! :)
When I ran it through the W3C CSS Validator it only picked up on the overflow-x and -y components. I need these in there to make the fixed positioning work.
What can I do to ensure I see a scroll bar in IE6 without upsetting the display in IE7 and FF?
Doc Type I have used is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
I am a novice to this, but I'm eager to learn.
Thanks,
Wizard247
body>div#right-sidebar{
position:fixed;
}
} /* EXTRA BRAKET HERE */
Also, did you validate your CSS? [jigsaw.w3.org...]
Marshall
@media screen{ <--
body>div#header{
position:fixed;
}
body>div#left-sidebar{
position:fixed;
}
body>div#right-sidebar{
position:fixed;
}
} <--What happens if you temporarily remove this:
* html{
overflow-x: hidden;
}[edited by: DrDoc at 7:40 am (utc) on July 9, 2007]
This puts the scroll bar around the content div; makes sense like that anyways.
The other option I can think of is to use the fixed positioning, and not use any CSS hacks/workarounds for IE. Instead include some IE-only javascript which makes IE support position:fixed.(numerous ones out there)
Oops, didn't see that. I shouldn't post when I'm tired :)
Marshall
To answer your questions: if I remove this:
* html{
overflow-x: hidden;
}
I get a scrollbar, however, the browser thinks the page is really short and when using the scrollbar, the fixed positioning does not work. The left and right bars move up only about 1 cm and the page cannot be scrolled right through to the bottom. HOWEVER, if I use the mouse scrollbar in the content part of the page, I can scroll all the way down and do not loose the fixed positioning.
I have validated the CSS and got overflow-x and overflow-y errors.
I'll try to redesign the page and use Javascript for the fixed positioning.
Thanks,
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
* html #CONTAINER TO BE IN FIXED POSITION{ /*IE6 only rule, applied on top of the default above*/
position: absolute;
top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop-40+"px" : body.scrollTop-40+"px");
}
/*]]>*/
</style>
<![endif]-->
The fxed container bounces a little when scrolling, but it works (had to use it myself.
Marshall
Wizard247
Marshall
