[css-d] More form layout pain

Sent by Ruvinskiy, Ray on 11 February 2003 16:04

Hi,

I've hit a rather interesting snag laying out my form, and I'm wondering
what's going on.

Basically, I've placed each form field inside its own div, which has "float:
left" set, and the div contains a label and a field separated by a <br>.
Example:
----------------------------------------------------------------------------
---------------------------------------
		<div class="form_entry">
			<label for="DateIn"> Date Signed In:</label><br />
			<input type="text" name="date_in" id="DateIn"
readonly="true" />
			<a href="javascript: void(0);" onclick="return
getCalendar(document.PerInfo.date_in);">
			<img src="popupcalendar/calendar.png" border="0"
style="margin-bottom: -3px;" /></a>
		</div>
		<div class="form_entry">
			<label for="SNPRI"> SN/PRI:</label><br />
			<input type="text" name="snpri" id="SNPRI" />
		</div>
		<div class="form_entry">
			<label for="EmpType"> Employee Type:</label><br />
			<select name="emp_type" id="EmpType" style="width:
100px;">
				<option>&nbsp;</option>
			</select>
		</div>
		<div class="form_entry">
			<label for="Rank"> Rank:</label><br />
			<select name="rank" id="Rank" style="width: 100px;">
				<option>&nbsp;</option>
			</select>
		</div>
		<div class="form_entry">
			<label for="Section"> Section:</label><br />
			<select name="section" id="Section" style="width:
100px;">
				<option>&nbsp;</option>
			</select>
		</div>
		<div class="form_entry">
			<label for="Supervisor"> Supervisor:</label><br />
			<input type="text" name="supervisor" id="Supervisor"
/>
		</div>
		<div class="form_entry">
			<label for="Room"> Room:</label><br />
			<input type="text" name="room" id="Room" />
		</div>
		<div class="form_entry">
			<label for="Local"> Local:</label><br />
			<input type="text" name="local" id="Local" />
		</div>
----------------------------------------------------------------------------
----------------------------------------
CSS:
.form_entry {
	float: left;
	padding: 15px 15px 15px 15px;
	font-family: Sans, Times, Serif;
	font-size: 0.85em;
}

My expectation was that the divs would float side by side and eventually
overflow onto the next line. However, when I make one of the fields a
<select> box (as shown above), this works as expected in Mozilla 1.2.1/Linux
but is quite broken in IE 6, Mozilla 1.3a nightly build/Win and Opera 7. The
select boxes seem to be taking up more vertical space than they should, and
things become incredibly scrunched up after the first line.

I was wondering if anyone could pickup on some problem in my code that I
missed.