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.

Solution 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).

Solution 2

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