Question

I have the below css running on a div and when I print screen and physically measure he widths the width in firefox is 181px plus a 1 px border on the left and 1px on the right. But when I view it in Chrome the width is 179px and the borders are 1px on the left and 1px on the right. As if they have eaten into the width of the box. Can anyone shed some light on this?

.tab{
    background:#fff;
    border-left:1px #000 solid;
    border-right:1px #000 solid;
    height:111px;
    width:181px;
}

Answer 1

Different browsers treat boders differently, try adding this to your .tab class:

.tab {
    ...
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

See http://paulirish.com/2012/box-sizing-border-box-ftw/
and/or http://css-tricks.com/box-sizing/

Alternatively, you could do the following to fix this “issue” for all elements:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }