SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    inconsistent form alignment in IE6/IE7

    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.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What does the full HTML and CSS code look like (I'm asking because this looks like a portion of the implementation)?

  3. #3
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't you need to give the inputs a width and/or margin-left?

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good catch, Dave. I forgot to add those when I was working on the sample form earlier this year.

  8. #8
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you say it doesn't work in some browsers, what does that mean exactly?

  10. #10
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A very clear article and excellent example. I think I'm finally getting the hang of this. Thanks again.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •