Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

box-sizing - floated elements 2

Status
Not open for further replies.
1DMF

1DMF

Programmer
Jan 18, 2005
8,795
GB
I seem unable to get box-sizing to work for padding-box.

I added this to a div

Code: 
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
 
Sort by date Sort by votes
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.
Click to expand...



----------------------------------
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
I found this..
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
Click to expand...

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
 
Upvote 0 Downvote
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
345
jason.lex
jason.lex
lupidol
  • Locked
  • Question
Elements not populate the entire screen 1
Replies
1
Views
157
ChrisHirst
ChrisHirst
lupidol
  • Locked
  • Question
Positioning elements, how do I do it ?! 2
Replies
2
Views
235
vacunita
vacunita
lupidol
  • Locked
  • Question
Elements with same atttributes are differenly positioned on my page
Replies
1
Views
176
ChrisHirst
ChrisHirst
tulsantide
  • Locked
  • Question
Populate values in a list box dynamically in HTA 1
Replies
5
Views
428
tulsantide
tulsantide

Part and Inventory Search

Sponsor

Back
Top