Display Tags For 'browser comparision'
This article is a companion article to my "Browser Comparision of Available Screen Width When Using 1024x768" which I think many people found useful. The other day at work a co-worker complained to me that a webpage was getting cropped off when printing it. I then had to tinker with the width of a few different elements on the page to get it to fit. After finishing that I began to wonder, what the max-width is that can be used various browsers when printing.
I ran a quick test of all the browsers I had installed to see at what width, would the browser's print preview window crop off my fixed width DIV. Here are the results I found:
|Firefox 3 @ 100%||686px||Shrink To Fit|
|Safari 4||718px||> 718px Triggers Shrink To Fit|
|Opera 9.5 @ 100%||730px||80% & Shrink To Fit|
|IE8 @ 100%||670px||Shrink To Fit|
|IE7 @ 100%||670px||Shrink To Fit|
|IE6 @ 100%||670px||75%|
Notes On My Results
You'll notice that many browser's default settings are set to 'shrink to fit'. This may solve the problem of extra-wide content when printing most of the time. I also decided, that when given the option, I would set the resize option to 100% to make all my browsers equal.
Also when I ran the test, I did not modify the page's margins which I'm sure would have an affect on the results. Safari also had an interesting feature that triggered shrink to fit when the content grew beyong it's max-width. I thought this was a pretty useful feature compared to most the other browsers.
Other results we can see, is Internet Explorer has stayed tried and true throughout it's past three versions sticking with 670px each time as it's max-width. Opera provides the most real-estate at 730px.
When writing print stylesheets knowing that the lowest common deneminator is Internet Explorer at 670px will help you when creating print stylesheets.
I was using my parent's computer the other day which is your standard Dell with a LCD monitor set at 1024x768. I decided to log on to Facebook, one of the internet's most popular websites. Upon logging in, using Internet Explorer 7, I was greeted with a wonderful horizontal scrollbar. I thought to myself "Facebook, the world's leading social network has horizontal scrollbars?". Sure enough, the Facebook developers failed to check their re-designed website in IE7, or possibly, on a 1024x768 monitor.
I wouldn't have minded if a horizontal scrollbar appeared if the design was targeted towards a higher resolution such as 1280x960 but this looked more like blatant oversight on Facebook's part. Look at how little of a horizontal scrollbar appears - Figure A.
Unnecessary Horizontal Scrollbars = Evil
Nobody likes horizontal scrollbars (unless of course your entire design relies on it). Horizontal scrollbars are annoying because they hide 15-17px of content at the bottom of you page. They are also confusing because the web browser is typically browsed un-directionally, due to limitations of the mouse's scroll wheel. When a user has to scroll down and over, this forces the user to abandon the mouse wheel and manipulate the horizontal scroll bar with the mouse's left button, thus wasting time.
So What Is The Available Screen Width In Various Browsers?
Had Facebook done their homework they would have realized that a content width of 1024px combined with a vertical scrollbar results in a horizontal scrollbar. Below is the maximum width you can use in various browser viewports, showing both with a vertical scrollbar and without:
|Without Vertical Scrollbar||With Vertical Scrollbar||Scrollbar Width|
|Internet Explorer 7||1003||1003||17|
|Internet Explorer 6||1003||1003||17|
IE incorrectly includes the scrollbar width in the element's width, thus the actual scrollbar width is 0px.
So What's My Point?
By looking at the chart above, we need to pick the lowest value as our maximum width. Seeing that 1003 is the lowest, which is used in Internet Explorer 6 & 7, if you plan to create a design for 1024x768, I would advise that you not make it wider than 1003 pixels. I would also advise that you never make your main content DIV an odd width. See http://csscreator.com/node/472#comment-2208 for more on that. My point is, you're better off choosing a width less than 1000px if you want to avoid horizontal scrollbars. Remember to always check you design in the early stages of development for your baseline screen resolution.
You might also be interested in my article Always Show Browser Scrollbars.