Aug
1
The title of this post is a bit misleading; I was trying to stuff it for SEO keywords without it being too long.
I ran into an issue with regard to the CSS property of "overflow" that I had set to "auto". When I set some test text of about 100 or so continuous "Hello " words, the scroll bars worked just fine. I then tweaked my node's height, and text and continued, but... The scroll bars weren't showing up, and my text was outside the bounds of the box (and therefore clipped)! Oh no! Tragedy of tragedies!
Through a little experimentation (in the end, this took me about 30 minutes to track down, and then test in all the browsers), I was able to determine what the problem was.
I ran into an issue with regard to the CSS property of "overflow" that I had set to "auto". When I set some test text of about 100 or so continuous "Hello " words, the scroll bars worked just fine. I then tweaked my node's height, and text and continued, but... The scroll bars weren't showing up, and my text was outside the bounds of the box (and therefore clipped)! Oh no! Tragedy of tragedies!
Through a little experimentation (in the end, this took me about 30 minutes to track down, and then test in all the browsers), I was able to determine what the problem was.
It turns out that the scrollbars and arrow buttons (part of the scrollbar) need a necessary minimum size for the node in some browsers to properly render. If that size requirement is not met, it will not render the scrollbars. Since I was using a small font, only intended for 1-2 lines of text (but was thinking, hey, if they wanted more, just in case...) to be displayed as an image caption, I did not need much vertical height. Unfortunately, the browser did. Some browsers will render using the Operating System's chrome (user interface graphics), others will render their own. Those that used the OS chrome had the same minimum height requirements.
Using Windows XP Professional, I came up with the following results, by browser:
IE6: 34px (uses OS chrome)
IE7: will render its own (tested down to 10px with resizeable controls)
IE8 Beta:will render its own (tested down to 10px with resizeable controls)
Firefox 2: 34px (uses OS chrome)
Firefox 3: 34px (uses OS chrome)
Opera 9.27: will render its own (tested down to 10px with resizeable controls)
Safari 3 for Windows: 50px (uses its own user interface controls, requiring a larger height)
Hopefully this will help some other people - or perhaps even myself some day in the future!
Using Windows XP Professional, I came up with the following results, by browser:
IE6: 34px (uses OS chrome)
IE7: will render its own (tested down to 10px with resizeable controls)
IE8 Beta:will render its own (tested down to 10px with resizeable controls)
Firefox 2: 34px (uses OS chrome)
Firefox 3: 34px (uses OS chrome)
Opera 9.27: will render its own (tested down to 10px with resizeable controls)
Safari 3 for Windows: 50px (uses its own user interface controls, requiring a larger height)
Hopefully this will help some other people - or perhaps even myself some day in the future!
0 Trackbacks