Solved

Safari scrollbars

Posted on 2004-04-21
4
1,050 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Video won't play 5 76
What is the optimum percentage to save images for webs. 4 31
Prevent surfing 14 43
Problem Loading Chrome 6 33
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…
If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
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.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

679 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