SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,332
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    You can try something like this
    Code:
    <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.
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ParkinT View Post
    You can try something like this
    Code:
    <style media="screen">
      html, body { width: 800px; }
    </style>
    <style media="print">
      html, body { width: 8.5in; }
    </style>
    Oooh, nasty. Particularly the "print" setting.

    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.

    Quote Originally Posted by awkward_clam View Post
    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.
    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™).

  8. #8
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can this scaling screw up you site in any way? I might need to do it.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well why would you even need to do it? IE shouldn't scale so bad as to need to zoom in the first place
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •