box-sizing - floated elements 2

[1DMF]

I seem unable to get box-sizing to work for padding-box.

I added this to a div

height:200px important;
overflow:hidden;
box-sizing:padding-box;
padding-top:80px;
float:left;

the div when rendered in FF is 280px high?

I thought box-sizing was meant to stop the padding being added to the element size?

I must be doing something wrong, so your advice is appreciated.

1DMF

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[audiopro]

Quoting from W3
"Firefox supports an alternative, the -moz-box-sizing property"

I'd never heard of the thing so I had a look around.


Keith

http://www.studiosoft.co.uk

 

[vacunita]

padding-box is not a valid value for the box-sizing property.

Valid values are:

content-box, border-box,inital and inherit.


I think what you are looking for is border-box.

Value Description
content-box Default value. This is the behavior of width and height as specified by CSS2.1. The specified width and height (and min/max properties) apply to the width and height respectively of the

content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height

border-box The specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn

inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties​

initial Sets this property to its default value.

inherit Inherits this property from its parent element.

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[1DMF]

Cheers Phil,

Dunno what site I was on, but they showed border-box & padding-box as separate possible values, however, it still doesn't work.

Looks like Keith is correct, stupid poxy FireFox still requires vender specific pre-fix CSS3 - come on FF get it together, modern web (CSS3 / HTML5) is already here!!!!





"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[1DMF]

I found this..

http://www.w3.org/TR/css3-ui/

Features at risk

The Working Group has identified the following features as at risk of being removed from CSS Basic User Interface Module Level 3 when exiting CR. Implementors are urged to implement these features, if they wish to see these features remain in this specification. All other features are either defined in a normative reference (e.g. CSS 2.1 [CSS21] or Selectors [SELECT]) or are believed to have two or more implementations, and thus will not be dropped without returning to last call.

•‘box-sizing’ property value: padding-box

I guess the site I was looking at used this property value then the CSS3 standards removed the possible 'padding-box' value?


"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[1DMF]

Well I just tried

-moz-box-sizing:padding-box;

And it worked, very confused, can someone advise whether this is a valid value or not?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[vacunita]

It appears to be valid for the Mozilla specific property moz-box-sizing but is in danger of being removed for the standard CSS 3 defined box-sizing property.

The moz specific property will not work in all Browsers., Its a specific property for Firefox and other Mozilla based browsers. So IE, and maybe Chrome will likely ignore it.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[1DMF]

Well border-box, does the same thing, so I guess I'll stick with that.

Thanks for the input.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music