Solved

Valid webkit-box-sizing

Posted on 2016-09-07
5
48 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 57

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 57

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 57

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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

734 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