Clears not clearing in IE6

jerry62704 · 02-27-2008, 05:43 PM

Works in FF of course, but in IE the labels line up nicely while the input boxes are all on the first line. Don't know how to include the image or what resolution to put it at (800x600 is what I just grabbed).

Here is the css:

Code:

.leftLabel {
	float:			left;
	clear:			left;
	width:			39em;
	line-height:	1.8em;
	margin-right:	5px;
	text-align:		right;
	}

.rightData {
	float:			left;
	clear:			right;
	width:			6em;
	line-height:	1.8em;
	text-align:		left;
	}

and here is the html:

Code:

	<fieldset title="<bean:message key="fs.calc.input.household.heading"/>">
		<legend><bean:message key="fs.calc.input.household.heading"/></legend>

		<div class="leftLabel">
			<bean:message key="fs.calc.input.numInHH"/></div>
		<div class="rightData">
			<html:text styleId="numInHH" property="numInHH" size="2" maxlength="2"/></div>

		<div class="leftLabel">
			<bean:message key="fs.calc.input.childrenUnder2"/></div>
		<div class="rightData">
			<html:text styleId="numberOfChildrenUnder2" property="numberOfChildrenUnder2" size="2" maxlength="2"/></div>

		<div class="leftLabel">
			<bean:message key="fs.calc.input.childrenOver2"/></div>
		<div class="rightData">
			<html:text styleId="numberOfChildrenOver2" property="numberOfChildrenOver2" size="2" maxlength="2"/></div>

		<div class="leftLabel">
			<bean:message key="fs.calc.input.qualifyingMember"/></div>
		<div class="rightData">
			<html:select styleId="qualifyingMember" property="qualifyingMember">
				<html:option value="false"><bean:message key="fs.calc.input.yesno.no"/></html:option>
				<html:option value="true"><bean:message key="fs.calc.input.yesno.yes"/></html:option>
			</html:select></div>

		<div class="leftLabel">
			<bean:message key="fs.calc.input.simplifiedProcessingUnit"/></div>
		<div class="rightData">
			<html:select styleId="simplifiedProcessingUnitInd" property="simplifiedProcessingUnitInd">
				<html:option value="false"><bean:message key="fs.calc.input.yesno.no"/></html:option>
				<html:option value="true"><bean:message key="fs.calc.input.yesno.yes"/></html:option>
			</html:select></div>
	</fieldset>

It will look something like this:
label 1 [input1] [input2] [input3]...
label 2
label 3
.
.
.

TIA,
Jerry

_Aerospace_Eng_ · 02-27-2008, 05:44 PM

Post the parsed HTML please.

jerry62704 · 02-27-2008, 06:59 PM

Sorry. Struts wouldn't have been used at all if I had designed it.

Code:

<fieldset title="Household Information">
	<legend>Household Information</legend>
	<div class="leftLabel">
		<label for="numInHH">Household size</label></div>
	<div class="rightData">
		<input type="text" name="numInHH" maxlength="2" size="2" value="" id="numInHH"></div>

	<div class="leftLabel">
		<label for="numberOfChildrenUnder2">Number of children under 2 for whom dependent care is paid</label></div>
	<div class="rightData">
		<input type="text" name="numberOfChildrenUnder2" maxlength="2" size="2" value="" id="numberOfChildrenUnder2"></div>

	<div class="leftLabel">
		<label for="numberOfChildrenOver2">Number of persons age 2 or over for whom dependent care is paid</label></div>
	<div class="rightData">
		<input type="text" name="numberOfChildrenOver2" maxlength="2" size="2" value="" id="numberOfChildrenOver2"></div>

	<div class="leftLabel">
		<label for="qualifyingMember">Is anyone in the household 60 or older, blind, or disabled?</label></div>
	<div class="rightData">
		<select name="qualifyingMember" id="qualifyingMember"><option value="false" selected="selected">No</option>
			<option value="true">Yes</option></select></div>

	<div class="leftLabel">
		<label for="simplifiedProcessingUnitInd">Are all household members TANF, SSI or GA recipients?</label></div>
	<div class="rightData">
		<select name="simplifiedProcessingUnitInd" id="simplifiedProcessingUnitInd"><option value="false" selected="selected">No</option>
			<option value="true">Yes</option></select></div>
</fieldset>

_Aerospace_Eng_ · 02-27-2008, 08:33 PM

I would do something like this

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#formcontrol {
width:45em;
margin:auto;
}
#formcontrol label {
float:left;
clear:left;
width:39em;
line-height:1.8em;
margin-right:5px;
text-align:right;
}
#formcontrol input, #formcontrol select {
float:left;
margin-bottom:8px;
}
</style>
</head>
<body>
<fieldset title="Household Information">
<legend>Household Information</legend>
<div id="formcontrol">
	<label for="numInHH">Household size</label>
	<input type="text" name="numInHH" maxlength="2" size="2" value="" id="numInHH">
	<label for="numberOfChildrenUnder2">Number of children under 2 for whom dependent care is paid</label>
	<input type="text" name="numberOfChildrenUnder2" maxlength="2" size="2" value="" id="numberOfChildrenUnder2">
	<label for="numberOfChildrenOver2">Number of persons age 2 or over for whom dependent care is paid</label>
	<input type="text" name="numberOfChildrenOver2" maxlength="2" size="2" value="" id="numberOfChildrenOver2">
	<label for="qualifyingMember">Is anyone in the household 60 or older, blind, or disabled?</label>
	<select name="qualifyingMember" id="qualifyingMember">
		<option value="false" selected="selected">No</option>
		<option value="true">Yes</option>
	</select>
	<label for="simplifiedProcessingUnitInd">Are all household members TANF, SSI or GA recipients?</label>
	<select name="simplifiedProcessingUnitInd" id="simplifiedProcessingUnitInd">
		<option value="false" selected="selected">No</option>
		<option value="true">Yes</option>
	</select>
</div>
</fieldset>
</body>
</html>

This reduces the amount of code needed. I suggest you read about divitis or you might be developing a case of it soon.

Andrew Johnson · 02-27-2008, 10:41 PM

You can't float:left and then clear:right and expect it to clear...

Use clear:left or clear:both

jerry62704 · 02-28-2008, 02:47 PM

On another project for the day so I won't get to this until tomorrow. But could you explain clearing for me? I was under the impression that "clear:left" would not allow any floating div to the left of the cleared one. Also, clear:right would force the current div below any floating divs to the left. Clear:both would put it by itself below any floats and above any other floats.

While the page looked fine in FF (design in FF and hack for ie <g>), it was rather unexpected in IE. Per Aero suggestion, I'm going to simplify. Absent that, I would have put the two divs in a container.