Question

So I’ve got a form that requires various things, lastly a textarea (done in HTML). I then make an image submit button (my own image).

<label for="comments">Comments *</label>
<textarea type="comments" name="comments" value= "" maxlength="1000" cols="28" rows="6"></textarea>
<br />
<input type="image" src="../../images/submit.png" name="submit" />

However, right after the textarea, it decides to not center the submit button. If I take the textarea out and it’s just after input areas, it will center just fine.

This is the CSS for my form (from what’s above):

label{
    padding-top: 3px;
    padding-bottom: 3px;
}

textarea[type="comments"]{
    float: right;
    resize: vertical;
    overflow: auto;
    font-family: Calibri, Segoe UI, Trebuchet MS, Arial, sans-serif;
    font-size: 12px;
    border-style: none;
    border-color: black;
    border-width: 1px;
}

input[type="image"]{
    display: block;
    margin: 0 auto;
}

Anyone have any idea how to fix this for IE/Safari? Thanks!

Answer 1

Add clear:both to your input image CSS.

For greater compatibility with older browsers, I would encourage you to use simpler selectors, rather than taking advantage of the attribute selector syntax. Perhaps add classes when necessary instead.

<textarea class="comments" ...></textarea>

Making your selector

textarea.comments {
  ...
}