Don't have scrollbars in IE6..!?

googling around it seems the opposite is usually the case. Right now when I load this page in IE6, it will not let me scroll down. I have to assume it’s something to do with overflow, but nothing I’ve tried will get scrollbars showing. I feel like it must be something pretty simple …
here’s the testsite: http://www.theverve.ca/testsite/index.php

It’s working in IE6 here - but I have to ask did you comment out that min-height:100% ?

When you declare the IE6 specific ‘height’ instead of min-height, be sure to set the overflow property back to ‘visibile’ - that’s your most likely culprit.

You’ve got:

  • html #bg {height:100%}

with overflow:hidden on just #bg

Though this:


html, body {

font-family: 'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;
height: 100%;
font-weight: 200;
font-size:13px;
line-height: 1.4;
}

is a really bad idea too. Only thing I recommend declaring on HTML and BODY for values is height:100%; and position:relative (fixes a opera quirk) - everything else there should be declared on JUST BODY.

Also, 1.4 WHAT? You didn’t state a metric… and declaring a px font size on body is pretty much a miserable **** fail… Since 99.99999999% of users are unlikely to ever have either of those first two fonts installed that’s kind-of a waste of code, few if any fonts support font-weights less than 400 and frankly using the non-named weights is a waste of time - and condensing those values to a single line might help clean things up a bit:

font:normal 85%/140% arial,helvetica,sans-serif;

The whole stylesheet is filled with little niggling issues like that.

I changed these selectors’ rulesets:

body {
  background: #e1e1e1 url(images/bggrad.gif) repeat-x top; 
  padding-left: 1px; 
  }

#bg {
  background: url(images/bg.jpg) 50% top no-repeat;	
  /*min-height: 100%;*/
  padding-left:1px;
  min-width: 808px;
  }

#wrapper {
  margin: 108px auto 20px;
  width: 809px;
  background: #FFF url(images/bg.jpg) -172px -108px no-repeat;
  overflow: hidden;
  position:relative;
  /*border: thin red solid;*/
  -webkit-box-shadow: 0px 0px 8px #555;
  -moz-box-shadow: 0px 0px 8px #555; 
  box-shadow: 0px 0px 8px #555;
  zoom: 1;
  }

If you don’t understand why I did something, please ask. I didn’t keep tabs on what I did; I simply removed unneeded rules, moved others, and added one or three.

cheers,

gary

Actually line-height without a unit is the preferred way to specify it because rather than pass down the actual computed size of the line height you pass down the scaling factor instead which maintains the prefect relationship between nested elements of different font-sizes.

It’s explained by Eric Meyer here.

Yes, it was commented out when I was checking to see if it would make a difference with scrolling in IE, which still isn’t working, though I’m glad it is for you…
Please tell me why it is a miserable asterisks fail to declare body font in px so I can learn instead of feeling like a miserable failure. And if there’s other issues like that I’d be happy to hear them if I can make sense of the reasoning behind it.

Hi Gary, I need the overflow:visible on the wrapper because I want the header background extending past the border, and I need the bg overflow hidden in order for the background not to start at the top of the wrapper instead of the top of the page like i want (which is something that doesn’t quite make sense to me, but it was pointed out that’s what i had to do for the background to line up properly and it worked.) And I still wasn’t getting a scrollbar with your code.

Are other people getting a vertical scrollbar on IE6 on the homepage? You’ve said it ‘works’ but I don’t know how much… I am also unable to select any of the text in IE, which I think could be related to the problem

OK, I missed that twist. I prefer to have the parent enclose its float content rather than the grandparent.

and I need the bg overflow hidden in order for the background not to start at the top of the wrapper instead of the top of the page like i want (which is something that doesn’t quite make sense to me, but it was pointed out that’s what i had to do for the background to line up properly and it worked.) And I still wasn’t getting a scrollbar with your code.
I haven’t spent enough time to figure out the reason on that. :shrug:

Are other people getting a vertical scrollbar on IE6 on the homepage? You’ve said it ‘works’ but I don’t know how much… I am also unable to select any of the text in IE, which I think could be related to the problem
I left off html, body {}. Delete the height.

Delete the {overflow: hidden;} from “body”.

IE6/7 will not allow overflow; they will stretch the box to enclose its content, because #wrapper’s width property triggers hasLayout.

These changes cause a full scroll, and text is selectable.

cheers,

gary

ok cool… i got rid of the body height 100% and it seems to work now (I’ve seen that mentioned as an opera fix, but it looks fine without it). well i still can’t select text, but I am now noticing that I can’t do that anywhere else in IE6 nor can I type into any form fields, so, yeah. not gonna worry about that. Thanks a lot!

Position:relative on the inputs/other elements should be able to fix typing into the form fields :slight_smile: