Grow your CSS skills. Land your dream job.

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

  • TGA
    # August 28, 2009 at 6:38 pm

    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

    # November 3, 2009 at 7:41 am

    Hi

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

    Rob
    # November 3, 2009 at 8:11 am

    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

    # November 3, 2009 at 8:19 am

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

    # November 3, 2009 at 9:26 am

    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
    # November 3, 2009 at 9:27 am

    Do you have a link to your site? :)

    # November 3, 2009 at 9:42 am

    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 !

    # November 3, 2009 at 10:03 am

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

    # November 3, 2009 at 10:22 am
    "chrisvtec" wrote:
    Managed to get them down to 15 :) do you have an idea for the rest please
    Code:

    should be something like:

    Code:

    An id should be unique, used once per page. Change them to classes instead.

    I don’t have access to ie right now, but I suspect your problem is being caused by javascript. Can you scroll if you disable javascript?

    TGA
    # November 3, 2009 at 11:36 am

    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

    # November 3, 2009 at 12:25 pm

    Well if the problem only happens in ie6 I really wouldn’t worry about it. It’s a site for clubbers, I’d be willing to bet that the proportion of the demographic stuck using ie6 won’t be more than a fraction of a percent.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".