CSS: Chrome and Safari seem to 'add' border to width, while IE, Firefox & Opera don't CSS: Chrome and Safari seem to 'add' border to width, while IE, Firefox & Opera don't google-chrome google-chrome

CSS: Chrome and Safari seem to 'add' border to width, while IE, Firefox & Opera don't


Nowadays you should be using the HTML5 doctype, if you're having issues about borders adding themselves to the element's width look up the CSS style: box-sizing

border-box - include border width/height and padding width/height or basically the width you set includes the borders/padding

content-box - the width you set on the element is only the content area, this does not include padding or borders

There is also padding-box which I don't use, usually the above two are enough.

Now sometimes, I think IE8 uses a different box-sizing than Chrome/FF etc, this is why sometimes you have issues. You can always debug and check what the box-sizing is set to.

Note: if you don't have the DOCTYPE then you're in quirks mode, and IE differs WILDLY from Chrome/FF on the box-sizing/box model - and that's your problem right there


segment your code into its simplest elements and test them on each browser. When you find the differences you can use different methods of browser detection to subtly alter the code for each instance. With that said... if you do not want to go stark raving mad, and CSS will do that more then anything in programming let the pixel go if you can.


To be safe, I usually open a table in this way:

<table cellspacing="0" cellpadding="0">

It is "old" HTML, but at least it forces coherency along browsers, and then I apply CSS as needed.