inconsistent form alignment in IE6/IE7

**AlexJones** · Oct 1, 2007, 17:44

Major newbie here -

I have a simple form that I wish to align. My problem is that the alignment works in some IE6 browsers and not others. Ditto IE7. IE6 on XP Pro. IE7 on XP Pro and Vista. (Didn't work on Vista). I took the CSS from Rachel Andrew's book. Also the trick with wrapping the controls in <div>. Here's the style4.css:

Code:

form div {
  clear: left;
  margin: 0;
  padding: 0;
  padding-top: 0.6em;
}

form div label {
  float: left;
  width: 25%;
}

and here's the page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Form Layout Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style4.css" rel="stylesheet" type="text/css" /> 
  </head>
  <body>
    <div id="content">
       <p>Please provide the following information:</p>
      <form method="post" action="register.html">
        <div>
          <label for="memberid">Member #:</label>
          <input type="text" name="memberid" id="memberid" />
        </div>
        <div>
          <label for="homezip">Home Zip Code:</label>
          <input type="text" name="homezip" id="homezip" />
        </div>
        <div>
          <label for="password1">Password:</label>
          <input type="password" name="password1" id="password1" />
        </div>
        <div>
          <label for="password2">Confirm Password:</label>
          <input type="password" name="password2" id="password2"  />
        </div>
        <div>
          <input type="submit" name="submitbtn" id="submitbtn" 
                 value = "Register" />
        </div>
      </form>
    </div>  
  </body>
</html>

I know I must be missing something very basic, I just have no idea what it might be.

Any help would be greatly appreciated.

**Dan Schulz** · Oct 1, 2007, 18:35

What does the full HTML and CSS code look like (I'm asking because this looks like a portion of the implementation)?

**AlexJones** · Oct 1, 2007, 19:30

Thank you for your quick response. Actually, this is all there is. The website I'm building will have many forms. This was a test page to determine whether the styling would render correctly. Which it did on some machines and not on others.

The html is in a file called FormLayoutTest.html. I simply put that and style4.css in a folder on each test machine's hard drive and brought the html page up in the machines browser.

**Dan Schulz** · Oct 1, 2007, 21:07

Well, I don't have any time right this moment to help you out, but I do have a sample form laid out with CSS that you can use to study (and use in your sites).

Code XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>CSS Based Form Layout</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css" media="screen,projection">
 
	* {
		margin: 0;
		padding: 0;
	}
 
	body {
		background: #FFF;
		color: #000;
		font: normal 85%/140% "lucida console", tahoma, verdana, arial, helvetica, sans-serif;
		letter-spacing: 1px;
		padding: 0 1em;
	}
 
	h1 {
		background: #FFF;
		color: inherit;
		font: bold 1.95em/2em georgia, garamond, "times new roman", times, serif;
	}
 
	#example-form {
		padding: 0.5em 0;
	}
		#about {
			float: left;
			margin-right: 1em;
			width: 30em;
		}
 
		#survey {
			float: left;
			width: 33em;
		}
 
		.fieldset {
			background: #FFE;
			border: 1px solid #000;
			margin-bottom: 1.5em;
			padding: 1em 0 0.5em 0.5em;
			position: relative;
		}
			fieldset {
				border: 0;
				display: block;
			}
 
		legend span {
			background: #CFC;
			border: 1px solid #000;
			color: #00C;
			padding: 0 0.25em;
			position: absolute;
				top: -0.75em;
			}
		}
 
		label {
			margin: 0.25em 0;
			vertical-align: middle;
		}
			#about label {
				clear: left;
				float: left;
				padding-top: 0.1em;
				width: 14em;
			}
 
			#survey label:hover {
				background: #FFE;
				color: #00F;
				font-weight: bold;
			}
 
		input {
			margin-bottom: 0.5em;
			padding: 0 0.25em;
			vertical-align: middle;
		}
			#about input {
				background: #FCFBFA;
				color: inherit;
				width: 14em;
			}
 
			#survey input {
				margin: 0 0.25em 0 0;
				padding: 0;
				width: auto;
			}
 
		select, textarea {
			margin: 0.5em 0.25em;
		}
 
		select {
			background: #FCFBFA;
			color: inherit;
		}
 
		textarea {
			background: #FCFBFA;
			color: inherit;
			padding: 0.5em;
		}
 
		textarea:active, textarea:focus, textarea:hover {
			background: #FFF;
			color: inherit;
		}
 
		.controls {
			clear: left;
		}
 
	</style>
</head>
<body>
<h1>Semantic Forms with (X)HTML and CSS</h1>
<form action="#" id="example-form" method="post">
	<div id="about">
		<div class="fieldset">
			<fieldset>
				<legend><span>Basic Information</span></legend>
				<label for="name">Your Name:</label> <input id="name" type="text" size="30" /><br />
				<label for="email">Your Email Address:</label> <input id="email" type="text" size="30" />
			</fieldset>
		</div>
		<div class="fieldset">
			<fieldset>
				<legend><span>What Is Your Favorite Color?</span></legend>
				<select name="sections">
					<option value="0">--select one--</option>
					<option value="1">Black</option>
					<option value="2">Blue</option>
					<option value="3">Brown</option>
					<option value="4">Green</option>
					<option value="5">Grey</option>
					<option value="5">Orange</option>
					<option value="6">Purple</option>
					<option value="7">Red</option>
					<option value="8">White</option>
					<option value="0">Yellow</option>
					<option value="10">Other/No Preference</option>
				</select>
			</fieldset>
		</div>
		<div class="fieldset">
			<fieldset>
				<legend><span>Tell Us About Yourself</span></legend>
				<div>
					<textarea rows="10" cols="40"></textarea>
				</div>
			</fieldset>
		</div>
	</div>
	<div id="survey">
		<div class="fieldset">
			<fieldset>
				<legend><span>What browsers are installed on your computer?</span></legend>
				<div>
					<label for="msie"><input id="msie" type="checkbox" name="browser" value="Microsoft" /> Internet Explorer</label><br />
					<label for="netscape"><input id="netscape" type="checkbox" name="browser" value="Netscape" /> Netscape Browser</label><br />
					<label for="mozilla"><input id="mozilla" type="checkbox" name="browser" value="Mozilla" /> Mozilla FireFox</label><br />
					<label for="opera"><input id="opera" type="checkbox" name="browser" value="Opera" /> Opera Web Browser</label><br />
					<label for="konqueror"><input id="konqueror" type="checkbox" name="browser" value="Konqueror" /> Konqueror KDE</label><br />
					<label for="safari"><input id="safari" type="checkbox" name="browser" value="Apple" /> Safari Web Browser</label><br />
					<label for="another-browser"><input id="another-browser" type="checkbox" name="browser" value="Other" /> Something Else</label>
				</div>
			</fieldset>
		</div>
		<div class="fieldset">
			<fieldset>
				<legend><span>What do you use to build your Web sites?</span></legend>
				<div>
					<label for="golive"><input id="golive" name="editor" type="radio" value="Adobe GoLive" /> Adobe GoLive</label><br />
					<label for="dreamweaver"><input id="dreamweaver" name="editor" type="radio" value="Macromedia Dreamweaver" /> Macromedia Dreamweaver</label><br />
					<label for="frontpage"><input id="frontpage" name="editor" type="radio" value="Microsoft FrontPage" /> Microsoft FrontPage</label><br />
					<label for="hand"><input id="hand" name="editor" type="radio" value="A Text Editor" /> Text Editor</label><br />
					<label for="other"><input id="other" name="editor" type="radio" value="Other" /> Something Else</label>
				</div>
			</fieldset>
		</div>
	</div>	
	<div class="controls">
		<input class="submit" type="submit" value="Submit Form" /> <input class="reset" type="reset" value="Clear Form" />
	</div>
</form>
<p>
	Copyright &copy; 2006-2007, The Monster Under the Bed. All Rights To Scare
	Unsuspecting Children Reserved.
</p>
</body>
</html>

**Tyssen** · Oct 1, 2007, 21:33

Don't you need to give the inputs a width and/or margin-left?

**DaveWoods** · Oct 2, 2007, 01:19

Dan, what about <label>'s for your textarea and select?

I'd probably add those within the <legend> for those two scenario's so that it acts as both the <legend> and the <label> for that particular form item.

**Dan Schulz** · Oct 2, 2007, 02:11

Good catch, Dave. I forgot to add those when I was working on the sample form earlier this year.

**AlexJones** · Oct 2, 2007, 05:29

Thank you for the sample page. I will study it carefully, try to adapt it to my needs.

If you do happen to see something in my page that might have caused this inconsistent behavior in the browsers, I would love to know what it is...

**Tyssen** · Oct 2, 2007, 13:06

When you say it doesn't work in some browsers, what does that mean exactly?

**AlexJones** · Oct 2, 2007, 15:30

Tyssen - to answer your question:

Browsing the same html page with the same stylesheet has one of two outcomes:

The labels line up one under the other, left justified and the text boxes line up one under the other and left justified. So it looks like a two column table.

or

The text boxes appear immediately after their respective labels: eg.,
label1islong ___________________
label2islmuchonger_______________________________
lablel3_____________________

I have had each of the results above with machines running XP Pro IE6.
I got the first result on XP Pro IE7, the second on Vista IE7.

**DaveWoods** · Oct 3, 2007, 00:13

Something like this might be useful

Accessible forms

I'd always wrap the entire label and input with the <label> tag but then use <span> around the actually label text so that it can be styled and positioned however you require.

Hope that helps.

**AlexJones** · Oct 3, 2007, 06:00

A very clear article and excellent example. I think I'm finally getting the hang of this. Thanks again.

The SitePoint Forums have moved.

User Tag List

Thread: inconsistent form alignment in IE6/IE7

Thread Tools

Display

inconsistent form alignment in IE6/IE7

Bookmarks

Bookmarks

Posting Permissions