I spent the last two days trying to use the overflow:auto property for a div but I kept running into a problem. I had the following class declaration:
.scrollComments {
position: relative;
top: 2px;
left: 0px;
height: 46px;
width: 376px;
overflow-y: auto;
border: solid 1px #dabd61;
}
Pretty simple and also valid; there is nothing special about it. I defaulted the scroll bars to let the browsers define them (which is the only behavior allowed in Safari). It should have worked. I should have seen a vertical scroll bar. But I didn’t. And I couldn’t, for the life of me, figure out why.
After struggling with various decorations and shifting of content, I realized my error. The problem had nothing to do with the content of the div. It also has nothing to do with any other class declarations, layers, javascript, or what have you. The whole problem has to do with Safari and Firefox and how they handle their default scroll bars. The problem was fixed by merely changing the height from 46px to 80px. The div was too small for the scroll bars to appear. It seems that Firefox and Safari do not scale their scroll bars to anything smaller than this.
Man. What an annoying little “feature”.