box-sizing: border-box;

[josht]

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: [http://allphasehosting.com/website-builder](http://allphasehosting.com/website-builder “”)

[grimski]

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?

[Paulie_D]

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

[josht]

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.

[Paulie_D]

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

[josht]

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.
[www.joshtummel.com/vim/images/1359041796.png](www.joshtummel.com/vim/images/1359041796.png “”)

[S_Honderdos]

It is about the same width here: http://s7.postimage.org/8i5lje7a3/Afbeelding_18.png

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.

[josht]

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

Thanks again though!

[S_Honderdos]

General question:

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

[josht]

Correct – both in PhotoShop and in the browser

[Author]

Posts