Border-box CSS not working properly

I have the following code: http://www.designated.net.au/testbed/test/

 body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    background: #000000;
 }

 #page {
    margin:0% 10% 0% 10%;
    width:80%;
    height:1000px;
    border:solid #333333;
    border: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
 }

As far as I know that should give me an inner border on the left and right of 10px, but instead I get a border inside the whole thing of about 2px.

Any ideas?

Answers


Fixed for me in Chrome, Safari, IE 7/8/9: http://jsfiddle.net/XsNck/

I believe your border declaration syntax was incorrect.

Not Working

border:solid #333333;
border: 0 10px;

Working

border-style: solid;
border-color: #333;
border-width: 0 10px;

From the spec:

The ‘border’ property is a shorthand property for setting the same width, color, and style for all four borders of a box. Unlike the shorthand ‘margin’ and ‘padding’ properties, the ‘border’ property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.

See also: https://developer.mozilla.org/en-US/docs/CSS/border-style

Incidentally (in light of the question title), this isn't directly related to the box-sizing property; box-sizing controls how the dimensions of a box are calculated (specifically, whether or not to include padding and borders). It doesn't change the border size.


Need Your Help

Spying not working with Angular, Jasmine and Sinon

angularjs jasmine sinon

I'm trying to spy on methods defined in a controller, but no matter what I do I see test failures with the message:

Constant-velocity rotation in OpenGL ES view using CADisplayLink on iPhone

ios opengl-es cadisplaylink

My OpenGL ES classes and code are derived from Apple's GLES2Sample code sample. I use them to show 3D objects rotating smoothly around one axis, at what I expect to be a constant rotation speed.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.