Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML Textarea - cursor starting in center of textarea rather than top

I have an HTML template and CSS that renders a textarea field, however when clicking in the field, the cursor starts from half way down the text area, not from the top left as I would expect.

This does not occur in IE, but does in Chrome and FF. I also get a list of previous values entered listed below, suggesting that the textbox styles are being applied.

Can anyone advise on which CSS properties I should be looking to modify?

Here is the HTML:

<input id="description" class="textarea" type="textarea" name="description" cols="70" rows="50">

Here are the properties being assigned to the text area:

.standardForm .textarea {
    bottom: 0;
    height: 90px;
    left: 0;
    margin-bottom: 0.5em;
    right: 0;
}
custom.css (line 255)
.standardForm .textbox, .standardForm .textarea, .standardForm .submit, .standardForm .select {
    background: none repeat scroll 0 0 White;
    border: 1px dotted #AAAAAA;
}
custom.css (line 251)
.standardForm .textbox, .standardForm .textarea, .standardForm .select {
    font-size: 12px;
    overflow: hidden;
    padding: 7px;
    resize: none;
    width: 90%;
}
custom.css (line 250)
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, button, textarea {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 100%;
    font-weight: normal;
    margin: 0;
    outline: 0 none;
    padding: 0;
    text-decoration: none;
    vertical-align: baseline;
}
like image 735
Ben Avatar asked Aug 13 '11 12:08

Ben


2 Answers

Providing space between the textarea tags usually results in such undesirable white spaces.Try the code with no spaces that would do the trick. <textarea></textarea>

like image 82
Chandan Gorapalli Avatar answered Sep 28 '22 16:09

Chandan Gorapalli


I think using

<textarea id="description" class="textarea" name="description" cols="70" rows="50"></textarea>

should solve your problem.

like image 24
Roy Avatar answered Sep 28 '22 16:09

Roy