Solved

Valid webkit-box-sizing

Posted on 2016-09-07
5
36 Views
Last Modified: 2016-09-07
I inherited a web site and one of the pages has the following code on it.

What is the VALID setting for this?
ScreenSP.png
0
Comment
Question by:lrbrister
  • 3
  • 2
5 Comments
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41787921
box-sizing (https://developer.mozilla.org/en/docs/Web/CSS/box-sizing)

Is the style declaration to control how padding and borders are treated with respect to the container (see box model)

The box model says if you have a container with width X then border, padding will be applied to the outside of the box - making the width (and height) greater.

When box-sizing is set to border-box then any padding / borders are included in the width of the container i.e. they don't increase the size of the container.
-webkit and -moz are just the Chrome (webkit) and FireFox (moz) specific versions of the style. As most browsers support this style the custom styles are no longer needed.
0
 

Author Comment

by:lrbrister
ID: 41787936
Julian,
  So I can remove that from the Page?
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41787944
Not sure why they have a zero in there - won't be recognised as far as I know.
Valid values are
content-box => Default box model - borders and padding outside the box.
border-box => keep width unchanged - put borders and padding inside the box.
0
 
LVL 52

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41787950
I believe so - I tried to find a use case for a zero - could not.
Tried a test page setting it to zero - browser ignores it - removes it from the styles in the console so I am assuming it does nothing.

Sometimes there are quirky things that unconventional use of styles help to achieve - but they are risky because they don't necessarily have a long life span.

I would remove it and see what the effect is. If there is an effect it should be one of two things.
Content will expand (in which case make it border-box)
Content will contract (in which case make it content-box)
0
 

Author Closing Comment

by:lrbrister
ID: 41787952
I removed it... no changes at all that I can see,

Will just wait for someone to yell.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now