Input box alignment problem

Discussion in 'CSS' started by bauerdude, Mar 13, 2009.

  1. #1
    I'm working on a website at the moment (what will eventually go on www.allnotions.com) and am having some issues aligning the input boxes for my signup form. According to my BrowserShots results (http://browsershots.org/http://templeofthedog.info/notions/newest/signup.html) this happens in most browsers, but on Firefox 3.0.7 and Firefox 4 for my Mac it displays perfectly (all the input boxes are aligned, everything is well).

    The problem itself is quite wacky, and I have no idea what's causing it. Take a look at this BrowserShots screenshot for an example of the problem (http://api.browsershots.org/png/original/5d/5da30c06d040f7cd1d800b42def3e373.png)

    Here's a link to the page: http://templeofthedog.info/notions/newest/signup.html

    Any ideas? My code is below, if you need that for reference. Thanks so much.

    The HTML form code:
    
    <form action="Engine_NewUser.php" method="POST">
    <p align = "justify">
    <label class = "input" for="email">Email:</label>
    <input type="text" name="email" size="23"/>
    <label class = "verify" for="email"> verify:</label>
    <input type="text" name="emailA" size="23"/><br>
    							
    <label class = "input" for="name">User Name:</label>
    <input type="text" name="name" size="23"/>
    <label class = "verify" for="nameA"> verify:<label>
    <input type="text" name="nameA" size="23"/><br>
    								
    <label class = "input" for="password">Password:</label>
    <input type="password" name="password" size="23"/> 
    <label class = "verify" for="password">verify:</label>
    <input type="password" name="passwordA" size="23"/>
    </p><br>
    <center><input class = "button lowermargin" type="submit" name="submit" value=" Create my account "/><br>
    By clicking on 'Create my account', you confirm that you<br> are over 13 years of age and accept the 
    <a href="tos.html">Terms of Service</a>.</center>
    </form>
    Code (markup):
    And all the CSS relevant to the problem:
    
    label {
    font-weight:700;
    color:#41a120;
    }
    
    label.input{
        display: block;
        width: 70px;
        float: left;
        margin: 2px 4px 6px 4px;
        text-align: right;
    }
    
    label.verify{
    	margin: 8px 4px 6px 14px;
    }
    
    form {
    border:1px solid #F0F0F0;
    background:#f8f8f8;
    margin:10px;
    padding:15px 25px 25px 20px;
    }
    
    form p {
    border-bottom:1px solid #E6E6E6;
    color:#41a120;
    margin:0;
    padding:12px 0 5px;
    }
    Code (markup):
    The rest of the stylesheet: http://templeofthedog.info/notions/newest/css/AllNotions.css
     
    bauerdude, Mar 13, 2009 IP
  2. Joak1m

    Joak1m Peon

    Messages:
    135
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Use tables or divs to arrange them. Then you can be sure its all same with all the browsers.
     
    Joak1m, Mar 13, 2009 IP
  3. bauerdude

    bauerdude Peon

    Messages:
    83
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    How would I arrange the divs? I've got all the Email, username and password input boxes in one div and the "verify"s in another, both set to float: left. And it looks like:

    http://i44.tinypic.com/3465oyd.jpg

    EDIT: I think I fixed it. Can anyone running Windows XP and Firefox 3.0.something confirm this? Thanks!
     
    bauerdude, Mar 13, 2009 IP
  4. Joak1m

    Joak1m Peon

    Messages:
    135
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Well done. Works perfectly with Opera and Firefox (Windows XP).
     
    Joak1m, Mar 14, 2009 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Yeah, because throwing more tags at the problem is the answer.

    What I'd have done is wrapped the labels around the inputs they are for, then used them as the positioning containers (pretty much just float 'em left) and probably use a fieldset instead of a paragraph since that is NOT a paragraph of text (though you DO have a paragraph in there), and giving it a hidden legend so that it meets accessability norms.

    <form id="signInForm" action="Engine_NewUser.php" method="post">
    	<fieldset>
    		<legend>Sign Up</legend>
    		<label for="email">
    			Email:
    			<input type="text" name="email" size="23" />
    		</label>
    		<label for="email">
    			verify:
    			<input type="text" name="emailA" size="23" />
    		</label>
    		<label for="name">
    			User Name:
    			<input type="text" name="name" size="23" />
    		</label>
    		<label for="nameA">
    			verify:
    			<input type="text" name="nameA" size="23" />
    		</label>
    		<label for="password">
    			Password:
    			<input type="password" name="password" size="23" />
    		</label> 
    		<label for="password">
    			verify:
    			<input type="password" name="passwordA" size="23" />
    		</label>
    		<input class="submit" type="submit" name="submit" value="Create my account" />
    		<p>
    			By clicking on 'Create my account', you confirm that you are over 13 years of age and accept the <a href="tos.html">Terms of Service</a>.
    		</p>
    	</fieldset>
    </form>
    Code (markup):
    With the following CSS:

    /* null margins and padding to give good cross-browser baseline */
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,menu,ol,ul,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img,fieldset {
    	border:none;
    }
    
    #signInForm {
    	position:relative; /* make 100% certain percentages are of this */
    	width:633px;
    	padding:16px 20px;
    	text-align:center;
    	color:#666;
    	background:#F8F8F8;
    	border:1px solid #EEE;
    }
    
    #signInForm legend {
    	display:none;
    }
    
    #signInForm label {
    	float:left;
    	width:290px;
    	margin-bottom:16px;
    	text-align:right;
    	font:bold 14px/16px arial,helvetica,sans-serif;
    	color:#4A2;
    }
    
    #signInForm label input {
    	width:150px;
    	margin-right:4px;
    	font:normal 14px/16px arial,helvetica,sans-serif;
    }
    
    #signInForm .submit {
    	padding:6px 12px;
    	font:bold 14px/16px arial,helvetica,sans-serif;
    	color:#FFF;
    	background:#4A2;
    	border:1px solid;
    	border-color:#BD8 #8B3 #8B3 #BD8;
    }
    
    #signInForm p {
    	width:60%;
    	margin:16px auto 0;
    }
    Code (markup):
    Or something to that effect. Lets us throw all those unneeded classes away, makes it a proper form instead of the half-assed approach most people use, and doesn't rely on any more tags than you had in the original - if anything it's less tags getting rid of those unneeded breaks.
     
    deathshadow, Mar 15, 2009 IP