My button becomes misaligned when I wrap it in an tag

Question

I was wondering whether one of you could shed some insight on why one of my buttons becomes misaligned when I wrap it in an <a> tag.

I have

<div class="outerdiv" id="navbar">
    <a href="runningCalculator.html"><input type="button" class="navbutton" value="Running Calculator"/></a>
    <input type="button" class="navbutton"/>
    <input type="button" class="navbutton"/>
</div>

in my body, and the first button is showing with margin at the top while the other 2, as desired, aren't.

Here's the CSS for the navbutton class:

.navbutton
{
    width: 150px;
    height: 25px;
    background-color: rgba(51,51,51,0.5);
    margin: 0px;
    padding: 0px;
    color: #FFF;
    font-size: 15;
    text-shadow: 2px 2px rgb(51,51,51);
}

You'll need to provide a fiddle, without a working example it could be anything. — Liam, Mar 24 '14 at 16:41

score 4 · Accepted Answer · answered Mar 24 '14 at 16:41

4

Don't wrap buttons in anchor tags. It is forbidden by the HTML specification and gives inconsistent (and often undesirable) results across browsers.

If you want the functionality of a link then use a link. If you want the functionality of a button then use a button.

Then apply CSS to make whichever element you selected look the way you want.

answered Mar 24 '14 at 16:41

Quentin

914,110
126
1,211
1,335

I thought one way to make a button act like a hyperlink was to do wrap it like I did. I actually got the idea from here: http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link – user3443528 Mar 24 '14 at 16:44
2

You mean the answer that says *This markup is no longer valid in HTML5 and will neither validate nor always work as potentially expected. Use another approach.*? @user3443528 – Liam Mar 24 '14 at 16:44
1

lol. When I wanted my button to act as a hyperlink, I scrolled down the page on that StackOverflow question until I found the "fix" that would require me to write the least amount of additional code. I guess that's not how I should choose answers in the future. – user3443528 Mar 24 '14 at 16:50

My button becomes misaligned when I wrap it in an tag

1 Answers1