Page won’t scroll in IE 6, but there’s a scrollbar

[TGA]

I am putting together a fairly simple page. The content is long and it requires a vertical scrollbar. It works fine everywhere except in IE6. There, the scroll bar does appear, but doesn’t actually function.

I have tried everything I could think of. (Thanks in advance for any pointers!)
Here’s the page:
http://tiny.cc/oR8YE

Specifically, I am testing with Internet Explorer 6, using XP, with service pack 3. I’m assuming this problem is happening in all the IE 6s.

The page is set up with a stretchable background image (called traffic) that is fixed normally but is absolute in IE6. Everything else on the page is relative:
– a centered wrapper
– Within the wrapper, a header.
– Under the header and in the wrapper, a left-floated small "links" div (*ideally I’d like this to be "position: fixed" — but first need to fix this scrolling issue.)
– Following "links," a taller, left-floated "content" div.

Code:

[u]The following styles are applied: [/u]
1) In [u][b]globalstyles.css[/b], [/u]which applies to everything:

html, body {
height: 100%;
margin: 0;
padding: 0;
border: 0;
left: 0px;
top: 0px;
}

body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size:100%;
line-height:1.125em;
}
#traffic {
height: 100%;
width: 100%;
position: fixed;
left: 0px;
top: 0px;
}

#wrapper {
width: 760px;
margin-left:auto;
margin-right:auto;
z-index: 1;
position: relative;
height: 1400px;
left: 0px;
top: 0px;
}

#links {
height: 250px;
width: 220px;
float: left;
position: relative;
left: 0px;
top: 0px;
}
#content {
float: left;
width: 540px;
position: relative;
height: 1150px;
left: 0px;
top: 0px;
}

#header {
background-color: #CFF;
float: left;
height: 250px;
width: 760px;
position: relative;
left: 0px;
top: 0px;
}

.text {
font-size:0.875em;
}

.smaller {
font-size:0.75em;
}

In [b][u]special-ie.css[/u][/b]: *

body {
font-size:16px;
}

#traffic,
#content,
#links,
#wrapper,
#header {
zoom: 1
}

And last but not least, in [b][u]special-ie6.css[/u][/b]:

html { overflow-y: hidden;
}

body { overflow-y: auto;}

#traffic
{ position:absolute;
z-index:-1;
}

#content { position:static; }

#wrapper {zoom: 1;
}

…..
* The stuff in this CSS applies only to IE browsers, and most if not all of it came from: http://www.alistapart.com/articles/howtosizetextincss/

**The stuff in here applies only to IE 6, and the point of it is to STRETCH THE BACKGROUND. For more, see http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

[chrisvtec]

Hi

Did you solve your problem yet ? as I’m facing the same problem as you do/had! please can you help?

[Rob MacKay]

Hey dude :)

You might want to first go through your errors, you have an impressive 60 of them on that page :O

http://validator.w3.org/check?uri=http: … omatically)&doctype=Inline&group=0

you also have 7 in your CSS…

http://jigsaw.w3.org/css-validator/vali … =1&lang=en

[chrisvtec]

hehe now i can see that :S i’m a still learning things and i m trying to do it quick! im gonna go through all errors ! hope it helps :)

[chrisvtec]

managed to fix all errors on css and reduced html error to around 30 ! but still have the same problem :/ i cant understand the other errors can you please help me out in this

[Rob MacKay]

Do you have a link to your site? :)

[chrisvtec]

http://www.clubbersevent.com/about_us.html

But at the moment I am just trying to fix this page :
http://www.clubbersevent.com/latest_news.html

so that we can launch it than i’ll go through it all and see what i can fix more! But at least with latest news working will do for now! As you can see the problem is in internet Explorer coz in Firefox the scrollbar works fine :S

I dont know how can i thank you if you help me through this !

[chrisvtec]

Managed to get them down to 15 :) do you have an idea for the rest please

[TGA]

Hello there.
I think our problem is that IE 6 simply will not do what we are trying to do. Check out this Zen Garden example: http://www.csszengarden.com/?cssfile=037%2F037.css. If you’re using a modern browser the face is fixed on the page, but if you’re using IE 6, it scrolls.
This is described in "The Zen of CSS Design" by Shea & Holzschlag. Pages 104-109. (I couldn’t find it on Google Books). It says: "While the fixed-position image scrolls off the page in Internet Explorer 6.0, the design is still attractive and acceptable."
So the designer fed a different design to IE6 than to other browsers, probably using "conditional comments." To find out more about how to use those, check out: http://ooyes.net/blog/definitive-guide-to-taming-the-ie6-beast.
I ended up scrapping my original design out of frustration, and moving onto something more manageable. But if I went back I would do the same thing as CSS Zen Garden — just make a different, not-so-great site for IE6 and keep the good stuff intact for browsers that support it.
Good luck!
TGA

[Author]

Posts