How to get button and href the same size for same class?

Question

I have such simple form in html:

<form action="add" method="get">
    <input name="ok" type="submit" value="ok" class="btn" />
    <a class="btn" href="ok">ef</a>
</form>

And I Have such css:

.btn {
  font-family: Arial, Tahoma, Verdana, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 -1px rgba(127, 127, 127, 0.5);
  text-decoration: none;
  line-height: normal;
  text-align: center;

  cursor: pointer;
  display: inline-block;
  /*padding: 5px 12px;*/
  color: #fff;
  border-bottom: 1px solid #EEE;
  outline: none;
  border: none;

  background-repeat: no-repeat;
  background: -o-linear-gradient(top,  #3BA5C8,  #2A829E); 
  background: -moz-linear-gradient(top,  #3BA5C8,  #2A829E);  
  background: -webkit-linear-gradient(left top, left bottom, #3BA5C8, #2A829E);   
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3BA5C8', endColorstr='#2A829E');
  }

But what's wrong? in firefox and ie 7 a get that tegs: a and input(submit) a different by height, sumbit is bigger, a is smaller. Help me please.

See http://jsfiddle.net/TxQpN/14/ works ie FF, but not in IE7

Possible duplicate: http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox — Mr Lister, Feb 05 '12 at 09:29
aaaaa.... i need now IE !!!!! IE! i told that now in FF is good, but in ie not — byCoder, Feb 05 '12 at 09:32

sandeep · Accepted Answer · 2012-02-04T19:09:21.987

0

You have to define height for <a> & button like this:

.btn{
 height:30px;
 vertical-align:top;
}

edited Feb 04 '12 at 19:09

answered Feb 04 '12 at 18:57

sandeep

91,313
23
137
155

this help with bug.... then they are the same size but a is sittuated more in bottom: here is img http://s44.radikal.ru/i105/1202/b0/b2a79d6d800d.jpg – byCoder Feb 04 '12 at 19:03
for this give vertical-align:top; in .btn – sandeep Feb 04 '12 at 19:09
That doesn't work, and because of the vertical text positioning, online makes the problem worse. – nshew13 Feb 04 '12 at 19:10
@N13; it's not creating problem we use vertical-align:top; because both are display:inline-block; – sandeep Feb 04 '12 at 19:13
sandeep, I commented before I saw that you added the v-a, but it still doesn't solve the problem. – nshew13 Feb 04 '12 at 19:26
button::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {border:0;padding:0;margin:0;} – byCoder Feb 04 '12 at 21:38
this helps me for firefox, but how for ie? – byCoder Feb 04 '12 at 21:38

How to get button and href the same size for same class?

1 Answers1