Buttons size not equal in IE and Firefox

Question

I have few buttons on my jsp page and I am using the style as :

*.buttonblue {
    background-color: #003366;
    border-color: #99CCFF;
    color: #FFFFFF;
    font-family: Verdana,Arial,Helvetica;
    font-size: 8pt;
    font-weight: bold;
    height: 20px; 
    display:inline;
    line-height: 1.2;
    text-align: center; 
         margin-top: 2px; 
}*

In Firefox the buttons are bit smaller than IE6. I can not define the size of buttons as the caption changes the button size changes accordingly.

I tried with width:auto but no success. Also, with overflow:visible the buttons in IE becomes bit smaller.

Please help.

Answer 1

IE has a bug with button padding, you may be experiencing this. Try something like this:

input.button {
    padding: 0 .25em;
    width: 0;  /* IE table-cell margin fix */
    overflow: visible;
}

input.button[class] {  /* IE ignores [class] */
    width: auto;  /* cancel margin fix for other browsers */
}

Note: if your buttons become even smaller in IE after applying this fix, make sure you are not in quirks mode. In IE's quirks mode the widths of objects are calculated differently than in standards mode, making everything a bit smaller (for items with a specified width). Best to always use standards mode if you expect consistent cross-browser results (even though IE's standards mode isn't that good, it's still way more standard than quirks mode).

Answer 2

A button is rendered however the browser decides. You will need to use an image and set it up to work like a button if you want it to look that same in all browsers.

Answer 3

Either use Conditional Comments :

Ex:

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

Or set custom width for input only read by IE like this :

    .buttonblue { 
background-color: #003366; 
border-color: #99CCFF; 
color: #FFFFFF; 
font-family: Verdana,Arial,Helvetica; 
font-size: 8pt; 
font-weight: bold; 
height: 20px; 
display:inline; 
line-height: 1.2;
text-align: center; 
margin-top: 2px; 
width: 100px; /* Read by FF */
#width:100px; /* Read by IE*/
}

Now you can tweak them accordingly