Form Elements Are Vertical Centered In Safari

[Bonmot]

Hi all,Annoying little problem. I have a form that includes a larger Comments field. In Safari ver (4.0.3) the textis vertically centered. IE and Firefox is at the top as desired. I've tried a variety of vertical alignment codes in different places (including in style sheet) but there is no effect. What could it be? THANKS!Here is a screen shot comparing IE to Safari:

<form action="form.php" method="post">				<table border="0" cellpadding="0" cellspacing="14px" width="auto">				<tr>				<td colspan="2"><input name="txtName" type="text" value="NAME*" id="txtName" class="formTextInput" onfocus="if(this.value=='NAME*')this.value='';" onblur="if(this.value=='')this.value='Name*';" style="width: 364px; height:25px; background-image:url(images/formFieldBG.jpg); background-position:left; background-position:top; background-repeat:no-repeat; border:solid 1px #592149; padding-left:10px; margin-bottom:8px;" />				</td>				</tr>				<tr>				<td colspan="2"><input name="txtPhone" type="text" value="PHONE*" id="txtPhone" class="formTextInput" onfocus="if(this.value=='PHONE*')this.value='';" onblur="if(this.value=='')this.value='PHONE';" style="width: 190px; height:25px; background-image:url(images/formFieldBG-Sm.jpg); background-position:left; background-position:top; background-repeat:no-repeat; border:solid 1px #592149; padding-left:10px; margin-bottom:8px;" />				</td>				</tr>								<tr>				<td colspan="2"><input name="txtEmail" type="text" value="EMAIL ADDRESS*" id="txtEmail" class="formTextInput" onfocus="if(this.value=='EMAIL ADDRESS*')this.value='';" onblur="if(this.value=='')this.value=EMAIL ADDRESS*';" style="width: 364px; height:25px; background-image:url(images/formFieldBG.jpg); background-position:left; background-position:top; background-repeat:no-repeat; border:solid 1px #592149; padding-left:10px; margin-bottom:8px;" />				</td>				</tr>				<tr>				<td><input name="txtComments" type="text" value="QUESTIONS OR COMMENTS" id="txtComments" class="formTextInput" onfocus="if(this.value=='QUESTIONS OR COMMENTS')this.value='';" onblur="if(this.value=='')this.value='QUESTIONS OR COMMENTS';" style="width: 364px; height:95px; background-image:url(images/formFieldBG.jpg); background-position:left; background-position:top; background-repeat:no-repeat; border:solid 1px #592149; padding-left:10px; margin-bottom:8px;" />				</td>								</tr>				<tr><td><span class="Text" style="line-height:0px">*Required</span></td></tr>		</table>		<div class="BTNsubmit">			<input id="submit" name="submit" type="image" src="images/btnSubmit.jpg" width="119" height="25" value="Submit" class="BtnFont" />		</div></form>

[jeffman]

The last element should not be <input type="text">. It should be a <textarea></textarea>.

[Bonmot]

Thanks for responding. Not sure what you mean by <textarea></textarea>. Where would the end tag (</textarea>) go?I changed to:

<tr>				<td colspan="2"><input name="txtComments" type="textarea" value="QUESTIONS OR COMMENTS" id="txtComments" class="formTextInput" onfocus="if(this.value=='QUESTIONS OR COMMENTS')this.value='';" onblur="if(this.value=='')this.value='QUESTIONS OR COMMENTS';" style="width: 364px; height:95px; background-image:url(images/formFieldBG.jpg); background-repeat:no-repeat; border:solid 1px #592149; padding-left:10px; margin-bottom:8px;" />				</td>								</tr>

There was no change in the output. Seems rather odd.

[Ingolme]

It has to be a textarea element, not an input element:

<textarea name="txtComments" type="textarea" id="txtComments" class="formTextInput" onfocus="if(this.value=='QUESTIONS OR COMMENTS')this.value='';" onblur="if(this.value=='')this.value='QUESTIONS OR COMMENTS';" style="width: 364px; height:95px; background-image:url(images/formFieldBG.jpg); background-repeat:no-repeat; border:solid 1px #592149; padding-left:10px; margin-bottom:8px;">QUESTIONS OR COMMENTS</textarea>

You have so many attributes there, you should move the onfocus and onblur to a separate script area and you should move all the style to a stylesheet.

[Synook]

Text inputs only allow one line of input (no matter how "tall" you make them) - for multi-line input you need a <textarea>.

[Bonmot]

Ah, the light just came on. That was exactly the solution. Many thanks not only for the solutionbut for the reasoning behind it. I will also take your advice about leaning out the attributes. Thestyling will go to the stylesheet. Not sure yet about moving the onfocus and onblur, but I'll dosome digging around and give it a try. I always like to learn ways to make scripts more efficientand clean and this is will be more valuable then the solving of the original problem.Again, many thanks to all!

[jeffman]

Try this. It accounts for all the elements in your form. You'll need to give your form an id and pass that to document.getElementById() in the first line:

<script type="text/javascript">   function initFormElements () {	  var myElements = document.getElementById("myForm").elements;	  var len = myElements.length;	  for (var i = 0; i < len; ++i) {		 myElements[i].onfocus = function () {			if (this.value == this.defaultValue) {			   this.value = "";			}		 }		 myElements[i].onblur = function () {			if (this.value == "") {			   this.value = this.defaultValue;			}		 }	  }   }   window.onload = initFormElements;</script>

[Bonmot]

Try this. It accounts for all the elements in your form. You'll need to give your form an id and pass that to document.getElementById() in the first line:

Thanks, DD. I look forward to working on this. I really appreciate the extra information!I enjoy learning new and (hopefully) better ways of doing things. Cheers.