CODEWITHSUNDEEP
cssfirefoxpadding
MadsK
MadsK

Reputation: 119

Firefox adds extra width with padding

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?

Upvotes: 5

Views: 3471

Answers (2)

Ehsan Shoja
Ehsan Shoja

Reputation: 441

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/

Upvotes: 4

J V
J V

Reputation: 11936

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

Upvotes: 9

Related Questions