Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #25921
    TGA
    Member

    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

    #66165
    chrisvtec
    Member

    Hi

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

    #66166
    Rob MacKay
    Participant

    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

    #66167
    chrisvtec
    Member

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

    #66173
    chrisvtec
    Member

    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

    #66174
    Rob MacKay
    Participant

    Do you have a link to your site? :)

    #66175
    chrisvtec
    Member

    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 !

    #66176
    chrisvtec
    Member

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

    #66183
    TGA
    Member

    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

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.