« What Do You Think Of This New Design?
Everyone Should Have Sick Days »

Overflow-y CSS Property And Safari 2 For Mac

Posted By:
Matt
Posted On:
January 7th, 2008
Posted In:
CSS & XHTML
Comments:
2 Responses, Join The Conversation.

At work we are making a web application. We have a "Library" set up that allows users to easily navigate through a huge amount of content. This library consists of 4 vertically scrolling divs side by side, think columns. At first I was using the overflow: auto; property and value so that a vertical scroll bar would show up only when necessary, otherwise there would be no scroll bar. As we started testing with real content it became obvious that not only did it look funny when some columns had vertical scroll bars and other’s didn’t, it was also slightly harder to use due to the inconsistency of the columns.

My solution was to use overflow-y: scroll;. overflow-y: scroll; tells the browser that the divs should always have a scroll bar on the y axis (vertical) even if the content doesn’t need to scroll. This allowed for a better looking, easier to use "Library".

Here’s the catch, I didn’t properly test this in all browsers and it doesn’t work in Safari for Mac. overflow-y is an Internet Explorer proprietary property and it just happened to work in Firefox. The W3C has recommended that overflow-y and overflow-x be added to the spec for CSS3 but for now, no luck. Safari just treats the divs as though they have overflow: hidden; declared so anything that doesn’t fit in the div gets cut off and you have no way to access it.

I suppose the convention of only having scroll bars when necessary is a Mac thing but I would still like the option to control the scroll bars in cases like this. I guess I’ll have to "hack" my style sheet and pass overflow: auto; to Safari while passing overflow-y: scroll; to IE and Firefox and just live with the fact that the scroll bars won’t be consistent in Safari.

***UPDATE: This post only applies to Safari 2 for Mac but I’m gonna post it anyway.

Similar Posts:

Comments

  1. Morgan Knicely Says:
    August 28th, 2008 at 10:15 pm

    How about adding a min-height rule to the contents of your columns? Make the min-height large enough and there will always be a vertical scrollbar.

  2. Matt Says:
    August 29th, 2008 at 11:33 am

    @Morgan - Good call, I never thought about altering the content’s properties as a solution. So if the divs have unordered lists in them just give the unordered list a min-height. I gotta try this. Thanks.

Leave a Comment

Show Background