I setup a site for a friend in chrome, and it looks fine. When viewing the site in I.E the entire site is larger. You even have to scroll horizontally.
There’s a feature in most browsers where you can press ‘ctrl -’ and it will essentially zoom out. Is there anything I can do in the CSS to ‘zoom out’ the website? It doesn’t need to be only Internet Explorer (I’m okay with the site being smaller in chrome/firefox).
Two points. First, most of the world uses A4 paper, not US Letter paper. A4 is a bit narrower, about 8¼ inches. Second, printers need some margins down the sides. I have my browser set to 0.5cm (0.2in) each side (but some people have wider margins), so my available printing width is about 7.8in. If I print like that, I’ve now lost anything in the right-most 10% of the page, including several whole words.
If you’re going to set a width for <body> in the print.css (and you don’t generally need to, unless you’re undoing something from media=“all”), set it at 100%. That way, it will fit on my paper and make best use of my paper, regardless of what size or shape paper it is.
It’s a good idea to make it a bit smaller than that, if you’re going for a fixed width. The reason being that a common screen resolution at the top end now is 1920px. “But that’s way bigger than what I’ve set,” I hear you cry. Yes, it is, but the main advantage of having a mahoosive screen resolution like that is that you can have two windows open side-by-side. And if your browser is taking up half the screen, it has 960px to play with including window frames and scrollbars etc. So you should set your maximum width to maybe 920px to avoid people in that position getting the DHS (Dreaded Horizontal Scrollbar™).