CSS buttons and crossbrowser issue
- by Jason
I have a class 'button' that I want to use for button, input and a tags. The problem is that both button and input tags have a greater line height than the anchor tag does. I have attached an example here so you can play around with it in firebug or whatever.
http://28dev.com/stackoverflow/css-buttons.html
But for those who just want to see the css/html, here it is:
.button {
font-family : helvetica, arial, sans-serif;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background : url(/images/ui-bg_glass_75_e6e6e6_1x400.png) repeat-x scroll 50% 50% #E6E6E6;
border-color : #636363 #888888 #888888 #636363;
border-right : 1px solid #888888;
border-style : solid;
border-width : 1px;
cursor : pointer;
display : block;
float : left;
font-size : 12px;
font-weight : normal;
line-height : 100%;
min-width : 100px;
padding : 3px 12px;
text-align : center;
}
.button, .button a {
color : #282828;
text-decoration : none;
}
.button:hover, .button:hover a {
border-color : #343434;
color : #080808;
}
.marginR { margin-right : 5px; }
<button class='button marginR' type='submit'>button.button</button>
<input type="submit" value="input.button" class="button marginR" />
<a class="button" href="">a.button</a>
