Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts

    Question Clears not clearing in IE6

    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
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Post the parsed HTML please.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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>
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Banned
    Join Date
    Feb 2008
    Location
    Winnipeg, Canada
    Posts
    396
    Thanks
    0
    Thanked 29 Times in 29 Posts
    You can't float:left and then clear:right and expect it to clear...

    Use clear:left or clear:both

  • #6
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •