Textarea Centers First Line Of Text And I Want It To Be Left-Aligned

Question

I've got a simple textarea in a form and for some reason when I click in the textarea to begin to type, it centers the first line. I can hit backspace until it lines up at the start of textarea but I don't know why it's doing that. I've Googled and can't seem to find a reason why it would do this. Here is my jsfiddle for it:

http://jsfiddle.net/4cVkn/

I've tried text-align:left in numerous places (inline HTML and CSS) and it doesn't seem to change anything. It seems like it should be a simple fix, thanks for the help.

Answer 1

It isn't centred, it just has a default value of a series of space characters.

Put </textarea> immediately after the start tag instead of filling it with whitespace.

Answer 2

The default content of a text area is the content between its tags. Your source has something like:

        <textarea name="bio">
        </textarea>

so the initial value of the text area is the newline and the spaces used for indentation – the characters you can backspace over.

To get rid of them, close the tag immediately:

<textarea name="bio"></textarea>

Aside: the kind of form layout you're going for should probably be done using tables – at least until the various shiny new CSS3 layouts are better supported. Your avoiding them actually made the code less readable what with all the <br/>s.