Solved

Safari scrollbars

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Google Chrome issues 30 54
Unable to install Google Chrome. 5 69
Browser history files 3 48
Add Site to Internet Explorer Compatability View using AutoIt 7 50
I recently found myself in a Corporate Situation where the client had requested blocking access to any and all websites except his own Domain? Easy? I am sure this would be your answer but their requirement was, this has to be done without using…
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
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…

910 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

16 Experts available now in Live!

Get 1:1 Help Now