CSS buttons and crossbrowser issue

Posted by Jason on Stack Overflow See other posts from Stack Overflow or by Jason
Published on 2010-04-08T00:36:22Z Indexed on 2010/04/08 0:43 UTC
Read the original article Hit count: 368

Filed under:
|

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>

© Stack Overflow or respective owner

Related posts about css

Related posts about html