Problem positioning Select Box

HTML & CSS
1

Hello. I have a simple address form that was working well until I decided to change the State field from an input box to drop-down box.

I have FireBug installed, and I just cannot figure out why the State field is not in alignment with the City and Zip fields. They should all be in one row.

I would appreciate help figuring out what is wrong with my CSS.

Here is my 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">
<head>
	<style>
		form{
				margin: 0 auto;
				padding: 30px 0;
				width: 640px;
		}

		form label{
				display: block;
				font-weight: bold;
				padding: 1.5em 0 0;
		}

		form label.sideBySideField{
				display: inline-block;
				padding: 1.5em 1em 0 0;
		}

		form input{
				display: block;
				margin: 0;
		}

		form input#firstName, 
		form input#lastName{
				width: 22em;
		}

		form input#Address, 
		form input#City{
				width: 26em;
		}

		form select{
			display: block;
			margin: 0;
		}

		form input#Zip{
				width: 6em;
		}
	</style>
</head>
<body>
	<form action="" method="post">
		<fieldset>
			<legend>My Form</legend>

			<!-- First Name -->
			<label for="firstName" class="sideBySideField">First Name:
			<input id="firstName" name="firstName" type="text" maxlength="35" value="" />
			</label>

			<!-- Last Name -->
			<label for="lastName" class="sideBySideField">Last Name:
			<input id="lastName" name="lastName" type="text" maxlength="35" value="" />
			</label>

			<!-- Address -->
			<label for="Address">Address:
			<input id="Address" name="Address" type="text" maxlength="40" value="" />
			</label>

			<!-- City -->
			<label for="City" class="sideBySideField">City
			<input id="City" name="City" type="text" maxlength="40" value="" />
			</label>

			<!-- State -->
			<label for="State" class="sideBySideField">State
			<select id="State" name="State">
				<option value="">--</option>
				<option value="">AK</option>
				<option value="">AL</option>
				<option value="">AR</option>
			</select>
			</label>

			<!-- Zipcode -->
			<label for="Zip" class="sideBySideField">Zip
			<input id="Zip" name="Zip" type="text" maxlength="5" value="" />
			</label>

		</fieldset>
	</form>
</body>
</html>

Sincerely,

Elizabeth

2

Try adjusting the vertical alignment.

form label.sideBySideField {
		  display: inline-block;
		  padding: 1.5em 1em 0 0;
                  vertical-align: bottom;
}
1 Like
3

Hi there EcolaParadise,

Like @SamA74 I cannot see why the alignment is incorrect. :unhappy:

What I can say though, is that there appears to be a fault with
Firefox’s rendering of the “select element” as the code works
perfectly OK in my other test browsers. :wonky:

coothead

4

Yes it looks like Firefox is aligning the selects bottom edge with the baseline of the text-content in the other elements on the line. The default alignment for inline-block elements (the labels in this example) is baseline which is fine but Firefox seems to think that a select is different to the input and aligns the bottom of the select with the baseline of the text rather than the baseline of the input.

Setting the labels to vertical-align:bottom should fix the problem as Sam suggests.

(Note that selects use the box-sizing:border-box algorithm whereas inputs don’t so to size both consistently the border-box model of the inputs should be made to match.)

2 Likes
5

@SamA74,

That seems to fix the problem. Thank you! :slight_smile:

6

Thank you also, Paul. :slight_smile:

@PaulOB,

Yes, now that things are properly aligned, I do notice that the Select is skinnier than the Input boxes.

I am sorry, but I don’t understand what you are suggesting above.

Sincerely,

Elizabeth

7

I would set the inputs to use box-sizing:border-box (input {box-sizing:border-box) and then set the top and bottom padding of the select to match what you are using for the input.

It can be tricky to get them perfect cross browser so you may need to mess around with height and line-height also.

8

Okay, thank you.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.