Two CSS/Form Formatting Issues

HTML & CSS
1

I’ve run into the following problems and am seeking help. The following are is a stripped down HTML file with an internal style sheet, borders and horrible background color for the sake of brevity and demonstration.

#1 - how does one incorporate breaks within a form label? I would like the label to break before the parens in this manner

Preferred Age Range
(check all that apply)

as opposed to this

Preferred Age Range (check
all that apply)

#2 - What changes are required to properly line up my fourth radio button? It seems as though padding out the label should do the trick but I’m not sure how to do that - relating back to my first question.

Here is the code and thank you.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tester</title>
<style type="text/css">
	html, body {
		height: 100%;
		margin-left: 1px;
	}
	
	body {
		margin: 0px;
		padding: 0px;
		text-align: justify;
		font-family: Arial, Georgia,  Sans-Serif;
		font-size: 13px;
		color: #3c3c3c;
	}
	
	
	/** FORM */
	
	form.contact {	   
	  		padding: 0;   
	  		margin: 0;   
	  		margin-top: 5px;
	  		width: 600px;
			}
	
	form.contact fieldset {      
			position: relative;      
			float: left;      
			clear: both;      
			width: 100%;      
			margin: 0;      
			padding: 0;     
	  		border: 1px solid #DADADA;
	}    
	
	form.contact legend {
			font-weight:bold;
			padding: 5px;
			margin-left: 1em;
			margin-bottom: 1em;
	}
	
	form.contact div {
			clear: left;    
			padding: .5em;
			border: 1px solid red;
			display:block;
			position:relative;
	}	
		
	form.contact label {
			text-transform: capitalize;
			width: 17em;  
			margin-right: 1em;
			margin-left: 1em;
			float: left;
			padding-top:.3em;
			padding-bottom:.3em;
			background-color:lime;
			display:block;
	}
	
	form.contact .buttonarea input {   
	  		background: #F87B1F;
	  		color: white;   
	  		font-weight: bold;   
	  		padding: 5px;
	  		margin:15px;
	}
</style>

</head>
<body>
						
	<!-- Form Start -->
	<form action="" method="post" class="contact">
	
	<!-- Foster Pet Info -->
	    <fieldset>
	    <legend>Foster Animal Specifications</legend>    

 	    <div>
	        <label for="ageRange">Preferred Age Range (check all that apply)
			</label>
			<input type="checkbox" name="Preferred Age Range" id="ageRange" value="Puppy" />
			Puppy: up to 1 year old
			<br />
			<input type="checkbox" name="Preferred Age Range" id="ageRange" value="Young Adult" />
			Young adult: 1-3 years old
			<br />
			<input type="checkbox" name="Preferred Age Range" id="ageRange" value="Adult" />
			Adult: 3-7 years old
			<br />
			<input type="checkbox" name="Preferred Age Range" id="ageRange" value="Senior" />
			Senior: over 7 years old
		</div>

		</fieldset>

		<div class="buttonarea">
			<input type="submit" value="Submit Application"/>
		</div>
		
		</form>
		<!-- End form -->		
</body>
</html>
2

Strange as it sounds, BR is valid inside inline-level elements as it is NOT a block level element, but a formatting one… so just use a <br />

3

Thanks so much! I thought I had tried that and it didn’t work. You solved both problems - I just added a few <br /> at the end of the label to pad it out and make the radio buttons line up.

Thanks again!

4

Just occurred to me, your form is invalid… and you don’t have enough labels.

All those text after the inputs should be labels too – and you can only use ID once on a page – you’re using the same ID on every one of those.

Oddly enough, you’re label should be the legend for that fieldset, and those texts should be labels – your name attribute is invalid since it has spaces in it, and they all should have UNIQUE ID’s to point the labels at.


<fieldset>
	<legend><span>Preferred Age Range<br />(check all that apply)</span></legend>
	<input type="checkbox" name="ageRange" id="agePuppy" value="Puppy" />
	<label for="agePuppy">Puppy: up to 1 year old</label>
	<br />
	<input type="checkbox" name="ageRange" id="ageYoung" value="Young Adult" />
	<label for="ageYoung">Young adult: 1-3 years old</label>
	<br />
	<input type="checkbox" name="ageRange" id="ageAdult" value="Adult" />
	<label for="ageAdult">Adult: 3-7 years old</label>
	<br />
	<input type="checkbox" name="ageRange" id="ageSenior" value="Senior" />
	<label for="ageSenior">Senior: over 7 years old</label>
</fieldset>

Or at least, that’s what labels, legends and fieldsets are FOR. The extra span would be to APO the legend’s content in padding at the top. I do that because legend doesn’t receive styling consistently cross-browser. We need the legend for accessibility reasons, but we can’t trust styling it. Absolute positioning a nested span off the wrapping form handles that problem nicely.

5

Thanks - I’m new to forms and tackling each problem as I slam into it.

I will implement your suggestions.

I gather that by applying a label to each checkbox one can then select the checkbox by clicking on the label.

I imagine my radio buttons are incorrect as well.

Thanks again - you’re really helpful!

6

Just tried your code again and would like to find a solution w/o an additional fieldset. This question is already one of many within a fieldset - I just trimmed the fat to isolate the problem. I really just want text on the left and 4 checkboxes on the right like so (with the checkboxes in front of each option):

Preferred Age Range Puppy: up to 1 year old
(check all that apply) Young adult: 1-3 years old
Adult: 3-7 years old
Senior: over 7 years old

Thanks again.

7