CODEWITHSUNDEEP
htmlcssbutton
Tallmaris
Tallmaris

Reputation: 7590

Input submit and "a" tag styling to look identical - Firefox issue

I am trying to get a button (input) and a link to look identical on my page, but I am having some alignment issues in Firefox. This is the HTML:

<p>
    <input type="submit" value="Create New User" />
    <a class="linkButton" href="/Admin">Cancel and Return to User Index</a>
</p>

I am using the following CSS:

.linkButton, .linkButton:link, .linkButton:visited, input[type="submit"], input[type="button"] {
    background-color: #4AACC5;
    border: 1px solid #4A77C4;
    color: #FFFFFF;
    cursor: pointer;
    height: 27px;
    margin: 2px;
    padding: 3px 6px;
    text-align: center;
    text-decoration: none;
    width: auto;
    font: inherit;
}

With the above setup everything works ok in Chrome, but in Firefox I have the two elements not aligned:

Misaligned Buttons

You can check this fiddle with both FF and Chrome: http://jsfiddle.net/hqJDZ/5/

Now, I would like a solution that would NOT involve using a in both cases with something like onclick="javascript:submit();". The Views are scaffolded and work nicely so I would prefer a pure HTML/CSS solution.

You may note I have not mentioned IE... I just don't want to go there for the time being :P

Upvotes: 2

Views: 224

Answers (2)

Rajnish
Rajnish

Reputation: 94

Just add two attributes in your class:

Display:block;
float:left;

Upvotes: 0

Michelle
Michelle

Reputation: 1844

I believe this might be your solution: https://stackoverflow.com/a/1986666/107244

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

Upvotes: 3

Related Questions