Scale entire site

Here’s the issue:

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).

What are my options here?

Thanks

You can try something like this


<style media="screen">
  html, body { width: 800px; }
</style>
<style media="print">
  html, body { width: 8.5in; }
</style>

I do this quite often.
Of course, I am no expert in CSS and expect you will get some better answers on this from the more experienced members.

I’m confused. I already sorted this issue out for you (didn’t I?):). Only resetting the body to zoom:1; should make everything okay!

If you keep zoom:.9 applied for everything else in the page, all of that will still get zoomed. It’s just that the body can’t get that otherwise your wrapper won’t center on the page.

Unless some other issue is happening that you haven’t mentioned (and that I didn’t see during my testing), that should be all you need :).

Sorry if I’ve gotten something wrong from this, midterms for college were this week, and I’m sleep deprived.

Hey guys, thanks for your help.

Ryan, sorry - I misinterpreted your post from the last thread. I thought you were basically saying just don’t zoom anything.

When I try to apply the zoom to elements within the <body>, stuff gets really messed up. For example, if I add zoom:.9; to the container, all the slider images disappear in internet explorer.

When I apply zoom to the body, the slider images are OK, and the site has scaled down, but it’s not centered.

Ok, I think the best solution is to change the container width from 1060px to 960px. I’ll have to manually change the slider images, but that’s not a huge deal.

F**K internet explorer amirite?

thanks again

Well you scale the size down 10%, so perhaps you can just make the body width 110% or something for IE. I didn’t know what you did to fix your problem initially. And yes, screw IE :wink:

Oooh, nasty. Particularly the “print” setting. :nono:

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™).

Can this scaling screw up you site in any way? I might need to do it.

Well why would you even need to do it? IE shouldn’t scale so bad as to need to zoom in the first place :slight_smile: