Styled HTML Submit button fails to respond to Return Key.

Question

I have a simple HTML form, thus:

<form>
    <p>
        <input type="text" name="text" />
    </p>
    <p class="buttonPara">
        <input type="submit" name="submit" />
    </p>
</form>

and a simple stylesheet, thus:

p.buttonPara
{
    position: relative;
}
p.buttonPara input
{
    position: absolute;
    left: 50px;
}

The submit button fails to respond to the return key unless I remove the class from the

<p class="buttonPara">

Any ideas anyone?

Answer 1

I'm not sure what you want to accomplish and why you take this approach. Do you want to align the button in the middle of the textfield above?

You could do this without positioning the button element. But that would mean wrapping everything in a container element and setting the width of that element along with the text-align property. Or you could set the width and align properties of the form of course.

Answer 2

I worked it out.

My form is contained in a div that has its class set programatically by the body onload event. Until the class is set, the div has an underlying style of display:none. In IE, the result is that hitting the return key does not submit the form.