Question

I have a form with a style input box and a <a> tag that acts like the form submit button. I don’t want a real form button because I will be performing AJAX on this form.

Here’s the markup:

<form action="" method="post">
    <input type="text" id="videoLink" />
    <a href="#" class="formSubmit">Go</a>
</form>
<div class="contentTop"></div>
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque suscipit nisi at elit elementum vitae condimentum felis aliquam. Aliquam vitae orci quis odio semper rhoncus id ut leo. Nullam laoreet semper tortor, vitae viverra est aliquam eu.</p>
</div>
<div class="contentBottom"></div>

And this is the style applied to the relevant markup:

#videoLink {
    background: url('images/inputBackground.png') no-repeat;
    width: 641px;
    height: 29px;
    border: none;
    padding: 5px 10px 5px 10px;
    font-size: 1.2em;
}

.formSubmit {
    display: block;
    text-indent: -9999px;
    background: url('images/formSubmit.png') no-repeat;
    width: 65px;
    height: 30px;
    position: relative;
    top: -35px;
    right: -590px;
    outline: none;
}

.formSubmit:hover {
    background: url('images/formSubmitHover.png') no-repeat;
}

.formSubmit:active {
    background: url('images/formSubmitPressed.png') no-repeat;
}

The thing is, I get this happening:

https://i.stack.imgur.com/EXsyM.jpg

And I don’t know a good solution. I need that gap where the buttons markup is to go away. When I tried to apply position: absolute to the .formSubmit element it aligns it from the top left of the window which will mess it up in different resolutions. I also tried doing the above with position: relative applied to the form but it just did the same.

Any help is appreciated, thanks.

Answer 1

Just to document another solution: you don’t need to use absolute or relative positioning to achieve what you want. “display: block” and a negative margin-top on the anchor will solve your problem. Here’s a third solution based on Robert’s examples:

Top Margin:
http://jsfiddle.net/xf2U4/