The Missing 0.5em

[Mordent 0]

Right, I'm going through the joy of designing forms: something that makes a lot of web developers cringe. Now, I'm going about it using CSS. Some people say tables, but quite frankly I'm not going to get in to that argument here. I'm using CSS.

 

Stubbornness on my part aside, I've now got to deal with the stubbornness of my forms. Let me show you the problem:

 

 

As you can see, it looks all lovely until the submit button. It's a little to the left, and (if you look at it carefully) a little narrower than the text fields. Here's my CSS for the relevant area:

 

/* form formatting */fieldset {	display: block;	margin: 1em;	border: 1px solid #888888;}legend {	margin-left: 1em;}label {	float: left;	width: 8em;	text-align: right;}input {	margin-left: 1em;	width: 10em;}input[type="submit"] {	margin-left: 10em;}

As far as I can tell, no other area of the CSS should really influence this. The possible exception would be (as you'll see in a minute) how I'm handling lists:

 

ul {	margin: 1em;}

It's also worth me noting that I'm using a "clean slate" for my CSS. Basically I use a separate CSS called reset.css which effectively removes all preconceived ideas that the browser has about how it should lay things out. Anyway, on to the important things...

 

Here's my HTML for this form.

 

<form action="login.php" method="post">	<fieldset>		<legend>Login Details</legend>		<ul>			<li><label for="username">Username</label><input type="text" name="username" /></li>			<li><label for="password">Password</label><input type="password" name="password" /></li>			<li><input type="submit" name="login" value="Login" /></li>		</ul>	</fieldset></form>

As you can see, it's nothing special. I use lists to allow me to tamper with the styling of the inputs and whatnot while still being fairly semantically correct. If you've got advice on laying out forms do feel free to share it, but it really isn't my concern at the moment.

 

So, now that all of the relevant stuff has been put on show, let me go through it. You'll note that the width of all input tags should be 10em. Similarly, the input fields (and the submit button) should line up:

The text fields have a total of 1 (the ul) + 8 (the label width) + 1 (the left margin) ems worth of distance from them and the left border of the fieldset.

The button has a total left margin of 10 ems worth of distance between it and the left border of the fieldset (correct me if I'm wrong, but the 1em margin of the ul wouldn't affect it, as 10 is bigger?)

Last time I checked, 1+8+1=10.

 

So, as a summary of the current situation, the input fields should be the same width, and should line up so that their left edges are in a vertical line. Clearly, however, they are not. So, after a bit of tampering, I discovered that adding 0.5em to the margin-left of the submit button (making it 10.5em) gets its left edge to line up with the others. Similarly, making its width 10.5em makes it the same width as the text fields.

 

So...why does the submit button decide it needs another 0.5ems to do what the others do? It's not like 0.5em occurs anywhere else in all of my CSS (not just the extract I showed you)! Any help would be greatly appreciated, I don't like things just to work, I like to know why the work, too.

 

Cheers!

 

Mordent

[iGuest 3]

Hey Mordent,

You really only have 9ems because 'ul' will automatically give you 1em, so it's only need 8em (label) and 1em (margin-left of input) label's floated lose their bounds, so they go over the ul's 1em while keeping relative position. The problem with input is it isn't affected by the reset.css, so em is relative to the font-size of the object and the font-size on input is inconsistent, make the input font-size: 1em; it will line up, the width however will always pose a problem, due to precision being lost in calculations. I worked the submit width to be about 10.34em; So still 0.34 out, but margins are sorted.

fieldset {	margin: 1em;}legend {	margin-left: 1em;}label {	float: left;	width: 8em;	text-align: right;}ul {	margin-left: 1em;}input {	font-size: 1em;	margin-left: 1em;	width: 10em;}input[type="submit"] {	margin-left: 9em;	width: 10.34em;}

Although I could be incorrect, and missing something, but that's what I could come up with.

Cheers,


MC

[Mordent 0]

Hmmm, that seems to work pretty nicely. You're right about the width being wrong still, but that's something I'm either going to have to live with or to make it some silly value. Honestly, I don't get why they don't just make the widths sort themselves out properly, but ah well.Nice one on the margins, though, thanks a bundle!Just as a quick update, however, I'm thinking about changing the layout of that part of the site anyway, but it's still a good learning experience. Cheers again.