Welcome to WebmasterWorld Guest from 54.162.184.214

Forum Moderators: not2easy

Message Too Old, No Replies

overflow-y (scroll bar) and fixed positioning problem in IE6

IE6 is not showing scroll bars

     
3:56 am on Jul 9, 2007 (gmt 0)

New User

10+ Year Member

joined:July 9, 2007
posts:3
votes: 0


The site I am working on is meant to have a top, left and right hand bar in a fixed position on the page while the main content is scrolling. This works perfectly in IE7 and FF and to some extent in IE6. The problem in IE6 is that the scroll bar on the righthand side is not visible. The page can be scrolled only when using the mouse scroll button or Pg Dn.

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

7:19 am on July 9, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts: 2248
votes: 49


If this is a copy/paste of your CSS, than you have an extra bracket which may be causing the problem:

body>div#right-sidebar{
position:fixed;
}
} /* EXTRA BRAKET HERE */

Also, did you validate your CSS? [jigsaw.w3.org...]

Marshall

7:35 am on July 9, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


That's not an extra bracket ... it comes from the @media declaration above:
@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]

10:13 pm on July 9, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 18, 2007
posts:671
votes: 0


A simple option is to redesign the page, so that the content div is just overflow:auto, and everything else isn't fixed position.

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)

6:12 am on July 10, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts:2248
votes: 49


DrDoc,

Oops, didn't see that. I shouldn't post when I'm tired :)

Marshall

11:17 pm on July 10, 2007 (gmt 0)

New User

10+ Year Member

joined:July 9, 2007
posts:3
votes: 0


Thank you all for your replies.

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,

12:45 am on July 11, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts:2248
votes: 49


Try this patch


<!--[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

3:34 am on July 11, 2007 (gmt 0)

New User

10+ Year Member

joined:July 9, 2007
posts:3
votes: 0


Thanks Marshall. I tried the patch, but I still don't see a scrollbar slider. The fixed position is not shaky for me, so not sure if it has even affected the display. It seems to render exactly the same as before.

Wizard247

4:13 am on July 11, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts:2248
votes: 49


I know there are other patches. Try searching "IE6 fixed CSS"

Marshall

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members