I'm trying to put a comment box within a table (As per assignment request) and my cursor position is in the middle of the box, rather than the top left as it should be.
HTML code:
<tr>
<td>Comments: <input id="comment" type="text" name="Comment" class="comment"/></td>
</tr>
CSS code:
#comment {
float: right;
display: block;
padding-right: 10px;
width:70%;
height:100px;
}
Try using a textarea instead of normal input for multi-line input. I think that is the behavior you are expecting.
<tr>
<td>Comments: <textarea id="comment" name="Comment" class="comment"></textarea></td>
</tr>
This happens with the 'input' tag. You should use a textarea instead.
<td>Comments: <textarea id="comment" name="Comment" class="comment"></textarea></td>
input is used for single line input, so it behaves like an inline element by default and the text line is vertically centered. Basically in that tall box you can only have one line even if you increase the height in CSS. Go ahead and try to type in a line break.
So you might be better off using a textarea instead, like:
<td>Comments: <textarea id="comment" name="Comment" class="comment">Some text</textarea></td>
Notice that the content in enclosed in the open and close tags instead of in the value attribute.
Also note that you do not need the "comment" class (class="comment") if you do not plan to use it in CSS or in JavaScript.
