×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

*
*
*
*

Thanks. We have received your request and will respond promptly.

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

box-sizing - floated elements
2

thread215-1730301

box-sizing - floated elements

box-sizing - floated elements

(OP)
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

RE: box-sizing - floated elements

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
www.studiosoft.co.uk

RE: box-sizing - floated elements

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.

Quote:


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...

----------------------------------
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

RE: box-sizing - floated elements

(OP)
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

RE: box-sizing - floated elements

(OP)
I found this.. http://www.w3.org/TR/css3-ui/

Quote:

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

RE: box-sizing - floated elements

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login
Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close