[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1080
  • Last Modified:

Safari scrollbars

Hi

Is there a way to force scrollbars to appear in Safari on a page shorter than the browser innerheight?

I've got a web site that's forced to the center of the browser. Because Safari doesn't display the scrollbar when it doesn't think it needs to, the center point of the page will shift depending on the height of the page, thus making the whole page move.

This is purely a cosmetic issue, but is annoying the hell out of our designer! Having the whole site shift left and right between pages doesn't look too great. Short of forcing each page to be longer than the browser innerheight, I can't find any other way of forcing the Safari scrollbars to display.

Any other ideas?!

FYI the site in question is www.londondesignfestival.com, I think the best example of the problem is in the archive section when viewing information about a sponsor and then moving to another page. Please excuse the frameset, the site was launched last night and we're waiting on a nameserver update!
0
finzaz
Asked:
finzaz
  • 3
1 Solution
 
seanpowellCommented:
The obvious solution would be to add overflow:scroll to the body element, but MOZ will add scrollbars to the table, instead of the body element.

Another avenue would be to add body { height:100%; } to your css, in order to force the scrollbar.

A third would be to add this to your stylesheet:

#expand
      {
      position: absolute;
      top: 0;
      bottom: -1px;
      width: 1px;
      }

And this to your page:
<div id="expand"></div>

Now all pages will be 1 pixel longer than the viewport, and force a vertical scrollbar. Since IE doesn't understand both the top and bottom attributes, it won't be affected and will behave as it does now.

Part of the problem is that Safari does not respond to the overflow property, so we're left with workarounds. It will depend on which one you prefer to use, and which integrates best with your code.

Let me know what you think so far, and we can go from there :-)

Thanks,
Sean

...I was so excited when I saw the layout, and then noticed all those tables :-(
0
 
seanpowellCommented:
Another option would be to test for the scrollHeight (the height of the html page) and if it's less than the clientHeight (the height of the visible viewport), then add a 16 pixel right-margin to the body element... but this may or may not be what you're looking for...
0
 
seanpowellCommented:
I take it you weren't happy about the solution?
0
 
finzazAuthor Commented:
The solution was sound, but couldn't be applied successfully to the site in question. I'm sure the solution you suggested will be helpful to others in a similar situation!

Thanks
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now