|800 x 600 Scrolling?!?!|
by NeoDinian (Jeff) -- August 3, 2005
|Finding horizontal scrollbars at 800x600 display. What could be simpler, right? Wrong! As I have discovered, and will share with you here, there are a few factors that determine if you will see that dreaded horizontal-scrollbar. |
In the awards community, there are many AP's that either disqualify, or deduct points when pages display with the horizontal-scrollbar. This is fine, as each AP is entitled to their own criteria for awards.
But have we ever sat down and figured out the details of this? Exactly what is involved with determining if you see a horizontal-scrollbar or not? Are you aware that the Theme you have set in windows may effect the screen width? No! Then please read on.
I began my tests by creating an image 800px by 600px, then making a simple page to display that image. It was at this time I noticed the first problem. There was a default MARGIN at the top and left side (IE also places a margin on the right and bottom). Mozilla and Firefox both had margins of 8px for top, and 8px for the left side. IE had its margins at 15px for the top (and bottom), and 10px for the left (and right) side in Classic theme, and a 9px left/right margin in the XP theme. Once confirming the margin sizes (complete with screenshots), I used CSS to make the margins 0px for the whole body of the document, then proceeded to the next test.
In this next test, I wanted to measure the actual WINDOW width of each browser, when viewing the test page. I needed to get the widths of each browser in 4 modes, with and without vertical-scrollbar, in both Classic and XP Themes. See the below table for the results.
|Test column shows if there were margins, vertical scrollbars, both or none.|
Other columns are for Mozilla (MZ), FireFox (FF) or Internet Explorer (IE)
in both Classic skin, and XP style skin.
All sizes are the FULL window width to display an 800px wide image
with NO horizontal scrolling. Data is in Pixels.
|Test||MZ C / XP||FF C / XP||IE C / XP|
|808 / 808||808 / 808||ND / ND|
|824 / 827||824 / 827||848 / 849|
|800 / 800||800 / 800||ND / ND|
|816 / 819||816 / 819||828 / 829 |
The Data in the above table was collected 2 ways. The Mozilla and Firefox data was determined using both screenshots for measurements, as well as java-bookmarklets that display both the viewable area width, and the full window width. Since IE is unable to use such a script, I had to rely upon the screenshots only for measurements. The "ND" in the table is because that category cannot be reproduced, as IE displays the vertical-scrollbar even when not needed. All screenshots were preformed with the MONITOR resolution set to 800x600.
After doing all those screenshots and measurements, I next wanted to know the widths of the actual borders of each of the browsers, in both Classic, and XP themes. The table below shows those results, including the width of the right side WITH a vertical-scrollbar.
|This table shows the widths in pixels of the left border, right border, and|
right border with scrollbar, of the 3 browsers in both Classic and XP Style skin.
|Browser||Left Border C / XP||Right Border C / XP||Right w/Scrollbar C / XP|
|IE||6 / 6||ND / ND||23 / 24|
|Firefox||4 / 4||4 / 4||20 / 23|
|Mozilla||6 / 6||4 / 4||20 / 23|
So you can see from the data, each browser has different widths for the borders. This is the reason for the differences in the overall widths as shown in the first table. But when you add things up, there is a 1 or 2 pixel discrepancy between the data! This is the difference between the browsers in how they round numbers. IE will round down 1 pixel in both themes (See below). But why are Mozilla and Firefox off by so much! Well, the scrollbar in both Mozilla and Firefox is NOT counted when determining the viewable area of the window! It is for this reason that even using a script to open a new browser window with an INNER dimension of 800 pixels will not work. The scrollbar alone in both Mozilla and Firefox is 16 pixels in Classic theme, and 19 pixels in XP theme.
IE Rounding down!?!? Well, this also depends. Are you using a monitor resolution of 800x600, or are you using a script to open a window at 800x600? Yes, there is a difference. The overall width of the browser will still be 800 pixels, but the viewable area will be larger by 1 pixel on the monitor resolution 800x600 (rounded down on window size of 800x600). This is because of a missing shadow down the right side of the browser window. When Windows opens a window on the screen, it has a 3-dementional look to it, including shadows. When you open full screen in any resolution, IE does not include the right shadow, so the viewable area of the browser is wider by 1 pixel. However, both Mozilla and Firefox do not round up (or down), although Firefox in full-screen mode does not show a left border, it becomes transparent and is still there.
WAIT! There's MORE... If you design a site using the IE-specific CSS scrollbar code, you can alter things even more. If you change the look and size of the IE scrollbar (make it smaller perhaps), it may look just fine in IE. However, since this is an IE-specific code, no other browser will change it's scrollbar, and they may then end up with the horizontal-scrollbar!
So how wide should I make my pages? Well, lets try to figure this one out. Lets add up all the borders and scrollbars of each browser in each theme (See table below).
|This table shows the widths in pixels of the left border and right border|
with scrollbar added together, of the 3 browsers in both Classic and XP Style skin.
The last column subtracts that number from 800 (Maximum browser width)
for Classic / XP theme.
|Browser||Classic Theme||XP Theme||Max Inner Demention C / XP|
|IE||29||30||771 / 770|
|Firefox||24||27||776 / 773|
|Mozilla||26||29||774 / 771|
So the smallest number there is 770 pixels wide. This would be the widest you can make your site without seeing any horizontal-scrollbars, right? Well, in my tests, 770 will leave a 1 pixel space by the right scrollbar in IE, but remember the rounded off 1 pixel! This means that you can ADD a pixel to the width and still see no scrollbar. So this now makes the magic number 771 pixels! And with an 800 pixel width IE window, you will fill the browser without a horizontal-scrollbar. In IE full screen at 800x600 resolution, you will have a single pixel near the vertical-scrollbar (remember the loss of the shadow?). As for Mozilla and Firefox, well Mozilla will get a 1 pixel space, and Firefox will get a 3 pixel space, both at the vertical-scrollbar. But NO Horizontal-scrollbar! YEAH!!!
To make my data even more complete, I still need screenshots for the latest versions of Netscape and Opera. So if anyone cares to contribute, here's what I need. Use the 800x600.jpg below with the 800x600_margin.html and 800x600_nomargin.html. First, I need you to resize your browser width until it JUST puts a horizontal-scrollbar, then back off 1 pixel for it to disappear. Do this with and without the vertical-scrollbar to make 4 images. Repeat that same process using the XP theme, and the Classic theme. This will produce 4 more images. Lastly, I need 2 images with the resolution itself set to 800 x 600, browser at full screen, one in Classic theme, one in XP theme. The completed project will result in 10 images. (Yes, I did all this here with IE, Firefox, and Mozilla.) Please zip them, and email the bundle to me. I would be happy to include your name with this project. You can get my email information at my website Spiders - A Web of Madness!.
Below you can view the test images as well as the screenshots from this article. These images will open alone with no navigation, so you will need to use your browsers back-button to return here. 800 x 600 with margin html test file
800 x 600 with no margin html test file
800 x 600 Test Image
770 x 400 Test Image
Firefox full screen at 800 x 600 resolution, classic theme
Firefox full screen at 800 x 600 resolution, XP theme
Mozilla full screen at 800 x 600 resolution, classic theme
Mozilla full screen at 800 x 600 resolution, XP theme
IE full screen at 800 x 600 resolution, classic theme
IE full screen at 800 x 600 resolution, XP theme
Firefox default margins
Mozilla default margins
IE default margins
IE Classic theme with default margins on both sides viewing 800x600.jpg
IE XP theme with no margins viewing 800x600.jpg
IE XP theme showing default margins on both sides viewing 800x600.jpg
Copyright © 2005
All Rights Reserved
|NeoDinian has been using computers for over 20 years. He only recently became active in the awards community in early 2005, but has been running an independent awards program since early 2000. His current NeoDinian.Com website is hand coded using PHP, and is presented using a full CSS layout and XHTML 1.1 valid code. NeoDinian will do his best to assist anyone in need, so drop him a line sometime.|