Geek Answers Handbook

Firefox adds extra width with padding

I have a question about CSS in Firefox.

If I set the width of the floating div - say 200px - setting padding-left to 10px in Firefox will add these extra 10px to the width. In IE, this is not the case.

What can you do to prevent Firefox from adding extra width to the div?

+5
source share
2 answers

It is not firefox that the problem is IE.

IE doesn't follow standards, there are a few tricks, but they all hurt 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 css for the standard box model

Other doctrines here

+8

mozilla border-box IE .

:

-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;

Mozilla, Safari Opera .

: http://www.css3.info/preview/box-sizing/

+4

More articles:


All Articles