Menu
I have a question regarding CSS in Firefox.
If i set a width of a floated div - lets say 200px - setting a padding-left to 10px will in Firefox add those extra 10px to the width. In IE that is not the case.
What can you do to prevent Firefox from adding the extra width to the div?
537
Now, because of the way the box sizing works in CSS, adding the padding to your element will add to its dimensions, since the width of the padding area will be added to the width of the content area, and so the total width (and height) of the element will increase.
What is meant by width 100%? if you specify width:100%, the element's total width will be 100% of its containing block plus any horizontal margin, padding and border.
To avoid the width or height getting increased or decreased when using CSS properties like margin , padding , etc, we can use the CSS property called box-sizing and set its value to border-box on the element in CSS.
By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen.
It's not firefox that's the problem, it's IE.
IE does not perform to standards, there are a few tricks to this but they are all a pain in the ass: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
The easiest way is to include a valid strict doctype tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Then just rewrite the css for the standards-compliant box model
More doctypes here
175
By default, box-sizing is set to content-box in mozilla and border-box in IE.
by using:
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
in your style's you can set box sizing of mozilla, safari and opera to border-box too.
for more information check: http://www.css3.info/preview/box-sizing/
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
