Why is the length of the buttons longer in Firefox 4 than IE9 and Chrome 11, how should it be fixed?

Css:

button, button.btnBlue, button.btnRed, button.btnGreen, button.btnOrange, button.btnPink {
margin-left: 2px !important;
margin-right: 2px !important;
padding-top: 0px;
padding-right: 3px;
padding-bottom: 0px;
padding-left: 3px;
height:25px;
border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  cursor:pointer;
  white-space:nowrap;
  overflow:visible; /* fixes width in IE7 */
  outline:0 none /* removes focus outline in IE */
}

button::-moz-focus-inner, button::-moz-focus-inner.btnBlue, button::-moz-focus-inner.btnRed, button::-moz-focus-inner.btnGreen, button::-moz-focus-inner.btnOrange, button::-moz-focus-inner.btnPink {
border:none;
}
/* removes focus outline in FF */

button:hover, button:focus, button:hover.btnBlue,button:focus.btnBlue, button:hover.btnRed,button:focus.btnRed, button:hover.btnGreen,button:focus.btnGreen, button:hover.btnOrange,button:focus.btnOrange,button:hover.btnPink,button:focus.btnPink {
  box-shadow:0 0 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0 0 3px rgba(0,0,0,0.4);
  -webkit-box-shadow:0 0 3px rgba(0,0,0,0.4);
}

button {
font:normal 13px arial,helvetica,sans-serif;
  color:#000;
  border:1px solid #ccc;
  background-color:#f6f6f6;
  background-image:linear-gradient(top, #fff, #efefef);
  background-image:-moz-linear-gradient(top, #fff, #efefef);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#efefef));
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff, endColorStr=#efefef);
}

button:hover, button:focus {
border-color:#999;
  background-color:#f0f1f3;
  background-image:linear-gradient(top, #fff, #ebebeb);
  background-image:-moz-linear-gradient(top, #fff, #ebebeb);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ebebeb));
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff, endColorStr=#ebebeb);
}

button:active {
 background-color:#ddd;
  background-image:linear-gradient(top, #ccc, #fff);
  background-image:-moz-linear-gradient(top, #ccc, #fff);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#fff));
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#cccccc, endColorStr=#ffffff);
}
/* End Defulat button */
/* Blue Button */
button.btnBlue {
font:normal 13px arial,helvetica,sans-serif;
  color:#ffffff;
  border:1px solid #415999;
  background-color:#3d5699;
  background-image:linear-gradient(top, #4465ba, #043fdb);
  background-image:-moz-linear-gradient(top, #4465ba, #043fdb);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#4465ba), to(#043fdb));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4465ba,endColorStr=#043fdb);
}

button:hover.btnBlue,button:focus.btnBlue{
/* removes focus outline in FF */
border-color:#415ca3;
   background-color:#44557f;
  background-image:linear-gradient(top, #4b63a0, #2b5cdb);
  background-image:-moz-linear-gradient(top, #4b63a0, #2b5cdb);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#4b63a0), to(#2b5cdb));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4b63a0,endColorStr=#2b5cdb);
}

button:active.btnBlue {
 background-color:#3d5699;
  background-image:linear-gradient(top, #4465ba, #043fdb);
  background-image:-moz-linear-gradient(top, #4465ba, #043fdb);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#4465ba), to(#043fdb));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4465ba,endColorStr=#043fdb);
}
/* End Blue Button */
/* red Button */
button.btnRed {
font:normal 13px arial,helvetica,sans-serif;
  color:white;
  border:1px solid #995441;
  background-color:#99503d;
  background-image:linear-gradient(top, #ba5d44, #db3104);
  background-image:-moz-linear-gradient(top, #ba5d44, #db3104);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ba5d44), to(#db3104));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ba5d44,endColorStr=#db3104);
}

button:hover.btnRed,button:focus.btnRed{
/* removes focus outline in FF */
border-color:#a35641;
   background-color:#7f5144;
  background-image:linear-gradient(top, #a05d4b, #db512b);
  background-image:-moz-linear-gradient(top, #a05d4b, #db512b);
  background-image:-webkit-gradient(linear, 0% 0开发者_StackOverflow中文版%, 0% 100%,from(#a05d4b), to(#db512b));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#a05d4b,endColorStr=#db512b);
}

button:active.btnRed {
 background-color:#99503d;
  background-image:linear-gradient(top, #ba5d44, #db3104);
  background-image:-moz-linear-gradient(top, #ba5d44, #db3104);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ba5d44), to(#db3104));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ba5d44,endColorStr=#db3104);
}
/* End red Button */
/* Green Button */
button.btnGreen {
font:normal 13px arial,helvetica,sans-serif;
  color:#000000;
  border:1px solid #599941;
  background-color:#56993d;
  background-image:linear-gradient(top, #65ba44, #3fdb04);
  background-image:-moz-linear-gradient(top, #65ba44, #3fdb04);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#65ba44), to(#3fdb04));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#65ba44,endColorStr=#3fdb04);
}

button:hover.btnGreen,button:focus.btnGreen{
/* removes focus outline in FF */
border-color:#5ca341;
   background-color:#557f44;
  background-image:linear-gradient(top, #63a04b, #5cdb2b);
  background-image:-moz-linear-gradient(top, #63a04b, #5cdb2b);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#63a04b), to(#5cdb2b));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#63a04b,endColorStr=#5cdb2b);
}

button:active.btnGreen {
 background-color:#56993d;
  background-image:linear-gradient(top, #65ba44, #3fdb04);
  background-image:-moz-linear-gradient(top, #65ba44, #3fdb04);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#65ba44), to(#3fdb04));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#65ba44,endColorStr=#3fdb04);
}
/* End Green Button */
/* Orange Button */
button.btnOrange {
font:normal 13px arial,helvetica,sans-serif;
  color:#ffffff;
  border:1px solid #996a41;
  background-color:#99683d;
  background-image:linear-gradient(top, #ba7b44, #db6804);
  background-image:-moz-linear-gradient(top, #ba7b44, #db6804);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ba7b44), to(#db6804));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ba7b44,endColorStr=#db6804);
}

button:hover.btnOrange,button:focus.btnOrange{
/* removes focus outline in FF */
border-color:#a36e41;
   background-color:#7f6044;
  background-image:linear-gradient(top, #a0734b, #db7d2b);
  background-image:-moz-linear-gradient(top, #a0734b, #db7d2b);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#a0734b), to(#db7d2b));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#a0734b,endColorStr=#db7d2b);
}

button:active.btnOrange {
 background-color:#99683d;
  background-image:linear-gradient(top, #ba7b44, #db6804);
  background-image:-moz-linear-gradient(top, #ba7b44, #db6804);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ba7b44), to(#db6804));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ba7b44,endColorStr=#db6804);
}
/* End Orange Button */
/* pink button */
button.btnPink {
font:normal 13px arial,helvetica,sans-serif;
  color:#000000;
  border:1px solid #994154;
  background-color:#993d50;
  background-image:linear-gradient(top, #ba445e, #db0432);
  background-image:-moz-linear-gradient(top, #ba445e, #db0432);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ba445e), to(#db0432));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ba445e,endColorStr=#db0432);
}

button:hover.btnPink,button:focus.btnPink{
/* removes focus outline in FF */
border-color:#a34156;
   background-color:#7f4451;
  background-image:linear-gradient(top, #a04b5d, #db2b51);
  background-image:-moz-linear-gradient(top, #a04b5d, #db2b51);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#a04b5d), to(#db2b51));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#a04b5d,endColorStr=#db2b51);
}

button:active.btnPink {
 background-color:#993d50;
  background-image:linear-gradient(top, #ba445e, #db0432);
  background-image:-moz-linear-gradient(top, #ba445e, #db0432);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ba445e), to(#db0432));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ba445e,endColorStr=#db0432);
}
/* End pink Button */

Html:

<button type="submit" class="btnRed">Cancel</button><button type="submit">Back</button><button type="submit" class="btnBlue">Continue</button>

I have been messing with this for about 3 hours and i can't seem to find whats wrong.

Because browsers don't render the same :)

In all seriousness though, if you don't want to spend the next 3 hours trying various hacks, refreshes and frustration, use an image. If you have a lot, sprite 'em.

Just guessing: You set a height for the buttons, but not a width.

So the width depends upon the font size, which in Firefox is bigger than in most other browsers.

Try adding "padding:0;" to "button::-moz-focus-inner"

Don't set an explicit width on the buttons using width, use the padding left and padding right to control the desired width and will work fine. (may have to use display:inline-block too), bit hard to tell without the desired markup

For example, rather than .button1 {width: 200px;} use .button {padding-left: 50px; padding-right: 50px;}