.pure-button link and button heights differ

[janosrusiczki]

Hello,

I'm trying to create a form with a skip link right next to the submit button, and I only managed something as shown below:

I'm using the following HTML:

<form action="/[...]" class="pure-form pure-form-stacked">  
  <fieldset>
    <label for="email">Email</label>
    <input class="pure-input-1-4" id="email" name="email" type="email" />
    <input class="pure-button" name="commit" type="submit" value="Submit" />
    <a href="/" class="pure-button">Skip</a>
  </fieldset>
</form>

The problem is, as you can see, that the link (Skip) is taller than the Submit button, even if they have the same class applied. I would like both of them to have the same height.

Or am I doing something wrong?

[narcis-radu]

Can you give additional details? What browser/ os are you using? I tried Chrome, Firefox - latest, IE 7 - 10 on windows and I cannot reproduce the error. I ran the tests on http://jsfiddle.net/SE7xf/embedded/result/

[janosrusiczki]

I forgot something important:

body {
  font-family: 'Open Sans', sans-serif;
}

Here's the updated fiddle: http://jsfiddle.net/SE7xf/1/embedded/result/

[janosrusiczki]

I found a solution, but I don't know how valid it is.

I my overrides file I have the following:

.pure-g [class *="pure-u"], html, button, input, select, textarea {
  font-family: 'Open Sans', sans-serif;
}

This seems to be doing the trick.

[narcis-radu]

a better solution is:

.pure-button {
    font-family: inherit;
}

[narcis-radu]

http://jsfiddle.net/SE7xf/2/embedded/result/

[janosrusiczki]

Multumesc mult. ;)

[narcis-radu]

@kitsched n-ai pentru ce