Give help. Get help.

  • # January 24, 2013 at 10:11 am

    Since I no longer have to support older browsers where I work, I’ve been playing around with using this code:
    > * {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}

    The main reason is because I’ve been doing responsive designs, and that is extremely useful to do something like:
    > width:100%; padding: 15px;

    Anyhow, the issue I am having is that my outer container that sets the max page with and centers the page, is not as wide as it should be. I have this code:
    > .center-width {width:960px;margin:0 auto;}

    When I do a screenshot and measure it in Photoshop, it comes out to 864px wide. I have to set it to 1067px wide in order for it to be 960px wide. Since I have no margin or padding on this or any outer containers, I have no idea why this is happening in all browsers.

    Does anyone have any idea what’s going on here? This is the page I’m working on: []( “”)

    # January 24, 2013 at 10:19 am

    Do you have border-box set on that also? If so, any padding that is declared for the element it will include it in its overall width. You could try setting box-sizing: content-box; to use the default and see if that fixes it?

    # January 24, 2013 at 10:29 am

    I wouldn’t rely on a screenshot to provide you with an accurate width

    #t-main * {
    box-sizing: border-box;

    seems pointless, just put it on everything.

    * {
    box-sizing: border-box;

    If I change the width of your class .center-width to 960px Chrome is telling me that is the width and that seems to be reflected in my browser window ‘gauge’.

    # January 24, 2013 at 10:30 am

    It shows 1067, but if I screen capture and measure it in Photoshop, it is 960. I first noticed this when I had it set to 960, but it was much more thin than the design I was working with. The inspector tool lies for me also (in both FireBug and Chome’s tools).

    I set it to content-box, but it didn’t change anything. I also added some more specific code in place of the “*”, and that didn’t fix it. The only thing that has changed it so far is if I remove the border-box code completely…

    Thanks for the input guys.

    Edit: Sorry Paulie_D, I think you were looking at it as I was making changes.

    # January 24, 2013 at 10:31 am

    >The inspector tool lies for me also (in both FireBug and Chome’s tools).

    I doubt that. It’s much more likely the screenshot is wrong.

    # January 24, 2013 at 10:38 am

    This screenshot might help explain what’s happening a little better. Notice the header in Photoshop is 960px wide, Chrome says the header in the browser is 960px wide, but they are clearly different widths.
    []( “”)

    # January 24, 2013 at 10:45 am

    It is about the same width here:

    I should rely on the browser, and if you feel you need a wider space don’t feel limited by the photoshop design. After all that is just a sketch.

    # January 24, 2013 at 10:47 am

    Omg nevermind everyone, I’m an idiot. PhotoShop wasn’t zoomed, but the browser was. ctrl + fixed it :/

    Thanks again though!

    # January 24, 2013 at 10:48 am

    General question:

    ctrl+0 makes it a 100% view again right?

    # January 24, 2013 at 10:51 am

    Correct – both in PhotoShop and in the browser

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.