Forums

LHAjack

Hello,

I'm having some trouble getting the labels for a form to align properly in IE 7. Works fine FF, Safari, and IE 8.

The labels are supposed to be right-aligned to the left of the field, but in IE 7 they are appearing right-aligned but on top of the fields. The label styling is inline (poor practice, I know. Just sort of did it that way as I went along and didn't bother to change it) but that shouldn't make a difference right?

Probably over-looking something pretty simple, but I stumped right now.

Code Below

CSS:

#form {
	position:absolute;
	left: 504px;
	top: 405px;
	width: 500px;
	height: auto;
	padding:50px 0 0 0;
	margin: 0 0 0 0;
	z-index: 52;
}

Form Div:

<div id=\"form\">
<p class =\"formCopy\">Fill out the form below and a Barker Financial<br />representative will contact you shortly.</p>
<form id=\"form1\" name=\"form1\" method=\"post\" Enctype=\"multipart/form-data\" action=\"contactUs.php\" onSubmit=\"return formValidator();\">
  
  <label style=\"float:left; text-align: right; margin-right:0px; margin-top:8px; width:280px\"><span class=\"contactUsCopy\" style=\"padding:0 5px 0 0;\">*First Name</span>
    <input type=\"text\" name=\"firstName\" id=\"firstName\" style=\"background-color:#FFFFFF; border:solid 1px; float:right; width: 184px;\" size=\"25\" />
  </label>
  <br />
  
  <label style=\"float:left; text-align: right; margin-right:0px; margin-top:8px; width:280px\"><span class=\"contactUsCopy\" style=\"padding:0 5px 0 0;\">*Last Name</span>
    <input type=\"text\" name=\"lastName\" id=\"lastName\" style=\"background-color:#FFFFFF; border:solid 1px; float:right; width: 184px;\" size=\"25px\" />
  </label>
  <br />
  
  <label style=\"float:left; text-align: right; margin-right:0px; margin-top:8px; width:280px\"><span class=\"contactUsCopy\" style=\"padding:0 5px 0 0;\">Address</span>
    <input type=\"text\" name=\"address\" id=\"address\" style=\"background-color:#FFFFFF; border:solid 1px; float:right; width: 184px;\" size=\"25\" />
  </label>
  <br />
  
  <label style=\"float:left; text-align: right; margin-right:0px; margin-top:8px; width:280px\"><span class=\"contactUsCopy\" style=\"padding:0 5px 0 0;\">City</span>
    <input type=\"text\" name=\"city\" id=\"city\" style=\"background-color:#FFFFFF; border:solid 1px; float:right; width: 184px;\" size=\"25\" />
  </label>
  <br />
  
  <label style=\"float:left; text-align: right; margin-right:0px; margin-top:8px; width:280px\"><span class=\"contactUsCopy\" style=\"padding:0 5px 0 0;\">State</span>
    <input type=\"text\" name=\"state\" id=\"state\" style=\"background-color:#FFFFFF; border:solid 1px; float:right; width: 184px;\" size=\"25\" />
  </label>
  <br />
  
  <label style=\"float:left; text-align: right; margin-right:0px; margin-top:8px; width:280px\"><span class=\"contactUsCopy\" style=\"padding:0 5px 0 0;\">Zip</span>
    <input type=\"text\" name=\"zip\" id=\"zip\" style=\"background-color:#FFFFFF; border:solid 1px; float:right; width: 184px;\" size=\"25\" />
  </label>
  <br />
  
  <label style=\"float:left; text-align: right; margin-right:0px; margin-top:8px; width:280px\"><span class=\"contactUsCopy\" style=\"padding:0 5px 0 0;\">*Email Address</span>
    <input type=\"text\" name=\"email\" id=\"email\" style=\"background-color:#FFFFFF; border:solid 1px; float:right; width: 184px;\" size=\"25\"  />
  </label>
  <br />
  
  <label style=\"float:left; text-align: right; margin-right:0px; margin-top:8px; width:280px\"><span class=\"contactUsCopy\" style=\"padding:0 5px 0 0;\">Home Telephone</span>
    <input name=\"homephone\" type=\"text\" id=\"homephone\" style=\"background-color:#FFFFFF; border:solid 1px; float:right; width: 184px;\" size=\"25\" />
  </label>
  
  <label style=\"float:left; text-align: right; margin-right:0px; margin-top:8px; width:280px\"><span class=\"contactUsCopy\" style=\"padding:0 5px 0 0;\">Work Telephone</span>
    <input name=\"workphone\" type=\"text\" id=\"workphone\" style=\"background-color:#FFFFFF; border:solid 1px; float:right; width: 184px;\" size=\"25\" />
  </label>
 
  <label style=\"float:left; text-align: right; margin-right:0px; margin-top:8px; width:280px\"><span class=\"contactUsCopy\" style=\"padding:0 5px 0 0;\">Comments</span>
  <textarea name=\"comments\" rows=\"4\" id=\"comments\" style=\"background-color:#FFFFFF; border:solid 1px; border-color:#000000; float:right; wrap:virtual; width: 184px; font-family:Arial; font-size:9pt;\"></textarea>
  </label>
 
 <!-- <br /><br /><br /><br />-->
  <p>
    <label style=\"float:right; clear:both; padding: 10px 131px 0 0\">
    <input type=\"submit\" name=\"Submit\" value=\"Submit\" action=\"Submit\" style=\"background:#43240D; color:#FFFFFF; border:hidden\" /> 
    </label>
  
 </p>

</form>
</div>

Thanks

doobie

Dude, first things first. Get that inline styling out of there and into a proper stylesheet.

Then, take a look at this article: http://css-tricks.com/tips-for-creating ... web-forms/.

It will answer all of your label placement questions.

Good luck.

LHAjack

Thanks for replying. Figured it out on my own. Solution involved a combination of moving the label tags and some IE conditional CSS.

Yeah, I had seen that article before. All of that was in-place for styling, it was just inline at the time. As I was tinkering, took most of the inline styling out and put it in proper. Didn't fix the issue, but definitely cleaner coding.

treehouse : what would you like to learn today?

Forums

Form label alignment/positioning in IE 7