Solved

Safari scrollbars

Posted on 2004-04-21
4
1,056 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

SendBlaster Pro 4 - Bulk Email Sending Software

SendBlaster 4 Pro - Best Bulk Emailing Sending Software
Automatic Subscribe / Unsubscribe Processing
Great for Newsletters & Mass Mailings
Optional HTML & Text Composition
Integration with Google Features
Built in Spam Score Checking
Free Professional Templates - Feature Packed!

Question has a verified solution.

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

Internet is a big network which is formed by connecting multiple small networks.It is a platform for all the users which are connected to it.Internet act as platform in different fields. Such as: Internet  as a collaboration platform. Internet  as…
Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
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 +…

734 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