CODEWITHSUNDEEP
htmlcssfirefox
Chase W.
Chase W.

Reputation: 1413

Firefox button CSS issue

JSFIDDLE I am trying to write styling for a button in CSS. The css code:

.btn{
    border: solid 1px rgba(210, 210, 210, 0.69);
    outline: none;
    color: black;
    background-color: #E8E8E8;
    font-family: Verdana, sans-serif;
    cursor: pointer;
    margin: 2px;
    display: inline-block;
    text-indent: 0;
    font-style: normal;
    font-size: 12px;
    padding: 3px 7px;
}

This works great for input tags and a tags

<input type='submit' class='btn'>
<button class='btn'>Submit</button>

The issue is with the a tag

<a href='#' class='btn'>Submit</a>

In chrome and safari, it works great, but in firefox, the sizing is off, how can I fix this?

Firefox "a" button issue

Upvotes: 0

Views: 62

Answers (2)

Gray Spectrum
Gray Spectrum

Reputation: 733

Try adding this to your css: 

button::-moz-focus-inner { 
    border: 0;
    padding: 0;
}

Upvotes: 1

bencripps
bencripps

Reputation: 2053

Here's a JSBin that should help: http://jsbin.com/gujetoze/1/edit?css,output

Since the issue only occurs in FireFox, you should use a query selector for FF, and increase the padding. I've also removed the text-decoration, but that's up to you.

@-moz-document url-prefix() { 
  a.btn {
     padding: 4px 7px
  }
}

Upvotes: 1

Related Questions