Jump to content

Form Elements Are Vertical Centered In Safari


Bonmot
 Share

Recommended Posts

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:SS-IE_and_Safari.jpg

<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>

Edited by Bonmot
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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>

Edited by Deirdre's Dad
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...