Forums

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

ChrisP

@josht, Chrome's Inspector tool is showing 1067px for me

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.

ChrisP

@josht, are you sure your screenshot isn't zoomed out at all? like @Paulie_D said, I wouldn't be relying on a screenshot for your measurements..

On another note, the border-box isn't really effecting anything on .center-width because it's not using any padding to begin with..

What I WOULD recommend is changing it to:

.center-width {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

Also, read http://css-tricks.com/box-sizing/ to get a better understanding of what border-box does.

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

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

treehouse : what would you like to learn today?

Forums

[Solved] box-sizing: border-box;