Indent in form field won't go away - html

Question

I have a contact form on this page: http://thehummingbirdplace.com/contact.html
The form's "comments" section has a large indent in the field when you click it to type. The indent can be deleted when typing, but I can't figure out how to get rid of it from the get go.
Here's the code for the form:
<div id="contactForm">
<form class="group" method="post" action="contact1.php">
<label for="text1">Name: </label>
<input name="name" type="text" id="text1" required>
<label for="text2">E-Mail: </label>
<input name="email" type="email" id="text2" required>
<label for="commentsfield" class="commentbox">Comments: </label>
<textarea name="comments" id="commentsfield"
cols=30 rows=9>
</textarea>
<input type="submit" value="submit"/>
</form>
</div>
Here's all the css I'm using on it:
#contactForm {
margin-left: auto;
margin-right: auto;
width: 520px;
height: 500px;
}
form {
padding-right: 15px;
padding-bottom: 0px;
padding-left: 15px;
position: absolute;
z-index: 1;
}
label {
display: block;
width: 270px;
padding-top: 15px;
margin-top: 0;
margin-bottom: 0;
margin-left: 15px;
}
label.commentbox {
width: 501px;
}
form * {
background: transparent;
behavior: url(../_assets/PIE.htc);
}
input {
-webkit-appearance: none;
-moz-appearance: none;
border: none;
background: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
padding: 0;
margin: 0;
}
.group:before, .group:after {
content: "\0020";
display: block;
height: 0;
overflow; hidden;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
input[type=text], input[type=email] {
width: 270px;
}
textarea {
width: 500px;
}
input[type=text], input[type=email] {
padding: 5px;
}
input[type=text], input[type=email], textarea {
display: block;
border: 1px solid #EAEAEA;
font-size: 16px;
background-color: #fff;
color: #666;
box-shadow: 0px 2px 3px rgba(255,255,255,0.5);
}
input:focus, textarea:focus {
}
input[type=email] {
padding-right: 10px;
}
input[type=submit] {
padding: 5px;
background: #666;
color: white;
border: none;
margin-top: 15px;
font-size: 100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
input[type=text].required {
padding-left: 10px;
}
input.required {
background: webkit-linear-gradient(#FFF, #DDD);
background: moz-linear-gradient(#FFF, #DDD);
background: ms-linear-gradient(#FFF, #DDD);
background: o-linear-gradient(#FFF, #DDD);
background: linear-gradient(#FFF, #DDD);
-pie-background: linear-gradient(#FFF, #DDD);
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
I haven't seen this happen before, and nothing stands out to me as causing the intent in the form. Any help would be greatly appreciated!

Answer 1

You need to get rid of the white space between your textarea tag
<textarea name="comments" id="commentsfield" cols=30 rows=9></textarea>
Buggy Demo
Fixed Demo

Answer 2

You have a big gap between your <textarea> </textarea>
Replace this:-
<textarea name="comments" id="commentsfield" cols="30" rows="9"> </textarea>
With this one :-
<textarea name="comments" id="commentsfield" cols="30" rows="9"></textarea>