Firefox and other browsers (Opera, Safari, Chrome) will place the padding, margin and border outside of the box (div, table or other element) changing the width and height of the element. Internet Explorer will place them inside the box and the width/height of the element will remain the same. You can see how this will cause problems when trying to create cross-browser websites.

As of CCS3 you can use border-sizing property to specify how an element should handle paddings, margins and borders.

This property can have 3 values:
inherit – inherit from the parent element
content-box – as specified by the W3C standard, the padding, border and margin are added to the outside of the box, increasing it’s width and height (default Firefox behavior)
border-box – default Internet Explorer behavior, it will place these items inside the box, keeping the width/height the same

This property works in the newest versions of Opera, Safari, Chrome and Internet Explorer. There is a separate property for Firefox you can use: -moz-box-sizing.
So, the cross-browser code for border-sizing would look like this:

-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;