Solved

Safari scrollbars

Posted on 2004-04-21
4
1,036 Views
Last Modified: 2008-02-26
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
Comment
Question by:finzaz
  • 3
4 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 10877602
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
 
LVL 31

Accepted Solution

by:
seanpowell earned 125 total points
ID: 10877833
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 11040347
I take it you weren't happy about the solution?
0
 

Author Comment

by:finzaz
ID: 11048819
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

After uninstalling Opera browser (for example ver. 10.63), your attempts to open a web page by clicking on a URL link may fail with an error message.  The error is "This operation has been canceled due to restrictions in effect on this computer. Ple…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now