Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Form alignment

Featured Replies

I am having issues with my form in IE6, when the user submits any form elements that are blank call en errir in Javascript and an red invalid is printed next to the field, this works fine in FF and IE7 however when done in IE6, the form alignment is replaced with the label then the element underneath it and then the printed invalid underneath that.

 

here is the code

#contactForm{
float:left;
width:350px;
}
#contactDirect{
float:left;
width:170px;
}

div.row {
 clear: both;
 padding-top: 5px;
 }

div.row span.label {
 float: left;
 width: 100px;
 text-align: left;
 }

div.row span.formw {
 float:left;
 width: 235px;
 text-align: left;
}

form.cmxform {
width: 340px;
font-size: 1.0em;
color: #333;
}

form.cmxform legend, form.cmxform label {
color: #333;
}

form.cmxform fieldset {
border: none;
border-top: 1px solid #C9DCA6;
}

form.cmxform fieldset fieldset {
background: none;
}

form.cmxform label.error, label.error {
color: red;
font-style: italic
}
div.error { 
display: none; 
}
input.error { 
border: 1px solid red; 
}
textarea.error { 
border: 1px solid red; 
}
#contactForm label { 
width: 250px; 
}
#contactForm label.error, #contactForm input.submit {
margin-left: 5px; 
}

 

and the html

 

 
 <div id="contactForm">
						<img src="images/contact/fill_in_form.gif" alt="Fill in our online form"  />	
					   <p><span class="highLight">*</span> <span class="grey">Denotes mandatory field</span></p>
						<form class="cmxform" id="contact" method="post">		 
						<fieldset>			 
						<div class="row">
						  <label for="firstname"><span class="label">Name<span class="highLight">*</span></span></label><span class="formw"><input type="text" id="contactName" name="contactName" class="size"/></span>
						</div>
  							<div class="row">
						<label for="phonenumber"><span class="label">Phone Number<span class="highLight">*</span></span></label><span class="formw"> <input type="text" id="contactPhone" name="contactPhone" class="size" /></span>
						</div>
						<div class="row">
						  <label for="emailaddress"><span class="label">Email<span class="highLight">*</span></span></label><span class="formw"><input type="text" id="contactEmail" name="contactEmail" class="size" /></span>
						</div>
						<div class="row">
						  <label for="enquiry"><span class="label">Enquiry<span class="highLight">*</span></span></label>
						<span class="formw"><textarea id="contactEnquiry" name="contactEnquiry" rows="8" class="size"></textarea></span>
						</div>
						<input name="action" type="hidden" value="validate" />
						  <input name="submit" type="image" src="images/contact/send.gif" class="padOut" />
						</fieldset>
						</form>
						</div>

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.