clear:both not working in Safari (1.2.3) or Firefox (1.5.0.1) 1

BillyRayPreachersSon · Mar 29, 2006

I've styling up a simple form - nothing complex at all, which has to validate to the HTML 4.01 loose DTD.

The code below is a cut-down test harness showing the problem I'm having. Both the HTML and CS validate no problem.

Anyway - the problem is that the clear:both on the HR element appears not to work in either Safari 1.2.3 (Mac) or Firefox 1.5.0.1 (Win). It works fine in Opera (7 and 8 for Windows), as well as NN7/Win and IE5/Mac.

I've been staring at this for so long, I think I can't see the woods for the trees, as they say.

Can anyone spot why the HR isn't showing up in the right place in Fx (or the radio buttons, for that matter)?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
	<title>Form test harness</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

	<style type="text/css">
		html, body, form {
			padding: 0px;
			margin: 0px;
		}
		html>body {
			font-size: 16px;
		}
		body {
			font-family: Arial, Helvetica, sans-serif;
			font-size: 100%;
			color: #333333;
			margin: 20px;
		}

		form {
			width: 379px;
		}

		label,
		.label,
		legend {
			font-size: 0.8em;
		}

		form p,
		form hr,
		.fieldPair {
			clear: both;
		}

		.label {
			float: left;
			width: 60%;
		}

		.field {
			float: right;
			width: 40%;
		}
	</style>
</head>

<body>
	<form action="">
		<fieldset>
			<legend>This is a field set</legend>

			<div class="fieldPair">
				<label class="label" for="field01">A text input:</label>
				<div class="field">
					<input type="text" name="field01" id="field01" value="">
				</div>
			</div>

			<div class="fieldPair">
				<label class="label" for="field03">A textarea:</label>
				<div class="field">
					<textarea name="field03" id="field03" cols="10" rows="3"></textarea>
				</div>
			</div>

			<div class="fieldPair">
				<span class="label">Some radio buttons:</span>
				<div class="field">
					<input type="radio" name="field04" id="field04a" value="">
					<label for="field04a">Yes</label>
					<input type="radio" name="field04" id="field04b" value="">
					<label for="field04b">No</label>
				</div>
			</div>

			<hr>
			<p>Some contextual help could could be here, after the hr divider... lorum ipsum dolor sit amet...</p>

			<div class="fieldPair">
				<label class="label" for="field02">Another text input:</label>
				<div class="field">
					<input type="text" name="field02" id="field02" value="">
				</div>
			</div>

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

I know that if I float the HR left, and give it a width of 100%, then it works in Fx... but I have no way of knowing in advance what content will be in the form, and so do not want to have styles for every possible element type set to float left (it just seems messy, and wrong).

Thanks!

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

Vragabond · Mar 29, 2006

Well, one problem that I see is that your .fieldPair is actually of zero height. It has two elements inside, both floated so none of them contribute to the height of .fieldPair. That said, clearing for each .fieldPair doesn't really get you where you want to be -- you should be clearing something inside .fieldPair to get it to extend. That I believe is the root to your problem.

I actually just float labels and inputs and use hrs as dividing lines between them. Whether I make them visible or not, I like to convince myself that they semantically fit there.

BillyRayPreachersSon · Mar 29, 2006

You, sir, are a genius

I added an empty span to the end of each of my field pairs:

Code:

<div class="fieldPair">
	<label class="label" for="field03">Textarea input:</label>
	<div class="field">
		<textarea name="field03" id="field03" cols="10" rows="3"></textarea>
	</div>
	[!]<span class="clearer"></span>[/!]
</div>

and then added the following CSS:

Code:

form .clearer {
	clear: both;
	display: block;
	height: 0px;
	overflow: hidden;
	line-height: 0px;
	font-size: 0px;
}

(the font stuff and line heights are purely there to stop any scaling issues than I sometimes see - even with overflow:hidden), and all works perfectly!

Thanks,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

clear:both not working in Safari (1.2.3) or Firefox (1.5.0.1) 1

BillyRayPreachersSon

Programmer

Vragabond

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor