Styling forms problem

I have no idea why this isn’t working.

Im trying to set a width to my labels so the input text boxes line up at the same point to the right of the labels. And it seems the width is not doing anything…

OGS Admin Page

also how do I get the following to all line up:

label: input
label: input
label: input

If I don’t put a set width to the form they all go in one straight line.

If I set the labels up as display:block, then the inputs get pushed down to the next lines.

I’m not sure why I’m having difficulty with something that seems very easy…:confused: brain not must be working right tonight ha

Try display:inline-block on the labels instead. Let’s you set the width without them turning into block-level containers forcing the new line.

Though you should add <br /> after each input to do so.

You may also wish to consider closing your form, adding a proper fieldset, and a legend so people know what the form is. (especially those on screen readers)… and swinging an axe at the div around it since there’s nothing wrong with styling FORM directly.

Also, “for” has to point at an ID, not a NAME. “name” is what gets sent to the server, “id” is what CSS, HTML and Javascript pay attention to, they are NOT interchangeable on label/input.


<form id="register" method="post" name="admin" action="">
	<fieldset>
		<legend>Log In</legend>
		
		<label for="registerUsername">Admin:</label>
		<input type="text" name="admin" id="registerUsername" /><br />
		
		<label for="registerPassword">Password:</label>
		<input type="text" name="pass" id="registerPassword" /><br />
		
		<input type="submit" value="Login" class="submit" />
	</fieldset>
</form>


#register label {
  display:inline-block;
  text-align:right;
  width:8em;
}

Should do the job.

You also don’t seem to be closing #home_content, and the use of a break to clear floats is SO 1990’s… all of the above explaining your SIX validation errors; end tags for inputs omitted (XHTML so you have to /> those), closing tag for form omitted, closing tag for a div omitted, and the two warnings for non-existant ID’s those “for” attributes are pointing at.

Yeah I didn’t create the site or the template, so not responsible for all the junk and 90’s code :lol:. I’m just putting together the form.

Thanks for all your input!