Button height problem in MSIE 6, 7

Question

Im trying to style a button with this:

button.plusone { width: 3.5em; padding: 3px 0 3px 0; text-align: center; }

Using the following css reset:

button {margin:0;padding:0;}
button {font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
button {*font-size:100%;}

In Safari and Firefox looks fine, but in Internet Explorer 6 and 7 looks too tall.

Safari, good

MSIE6, bad

Is this a known bug? How can I fix it? Thanks!

Answer 1

Hai victor,

Here is the fix for your question http://jehiah.cz/archive/an-even-better-ie-button-width-fix

and this http://particletree.com/features/rediscovering-the-button-element/

or try setting

button {
width: auto;
overflow: visible;
line-height: 0px;
}

Answer 2

Looks like the typical box model problem, where IE 6,7 incorrectly calculates height to include the 3px padding you have for top and bottom. You can fix this using a box model hack such as the one below.

button.plusone {height: 20px;  width: 3.5em; padding: 3px 0 3px 0; text-align: center; }
* html button 
{ 
    height: 20px; /* For IE 5.x browsers */
    w\idth: 26px; /* For IE 6,7 browsers */
}

More on the well known box model issue and workarounds: http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41

Answer 3

in the end I decided to do it as a link and display:inline-block thank you all!