css form problem

**rozner** · Sep 6, 2007 10:07

I'm redesigning a form that was using tables... I'm trying to keep the css as simple as possible as this is not a complicated form, the only issue I'm having is with a checkbox and the text next to it, or the text that's supposed to be next to it, but ends up on the next line.

This piece of HTML

Code:

<label class="signUpFormLabel">&nbsp;</label>
<input name="print" type="checkbox" id="printCheckbox" onclick="javascript:displayState()"/>
<p class="bluetext">I would like to receive free print-based activities, reports and CD-ROMs of thought-leader interviews.</p>

with this css

Code:

label.signUpFormLabel, label.signUpFormLabelOptional {
    float: left;
    width: 120px;
    color: #0878ac;
    margin-top: 2px;

}

So I want the text to appear next to the checkbox, but it goes on the next line. The bluetext class is just a color, I tried sticking float:left in there but it makes no difference.

I would appreciate any help on this.

Thanks

**CraniumDesigns** · Sep 6, 2007 10:53

well, you're using a "p" tag which starts a new paragraph. that's why it jumps down to another line below. you should do it like this my opinion:

Code:

<input name="print" type="checkbox" id="printCheckbox" onclick="javascript:displayState()"/>
<label for="printCheckbox" class="bluetext">I would like to receive free print-based activities, reports and CD-ROMs of thought-leader interviews.</label>

labels should always have the "for" attribute defined to tell the browser what element it's a label for. then just apply your class to style it.

**rozner** · Sep 6, 2007 11:02

yeah you're right about the <p>, I had tried span and div as well, span wrapped around in an ugly way, div did the same as p, I'll try using a label for that as well.
Thanks

**CraniumDesigns** · Sep 6, 2007 11:09

yeah div always starts a new line by default too. labels and only labels should be used for accessibility reasons. labels allow the user to click on the text and have it select the form element, and it also makes it easier for blind people using screen readers to view your site.

**rozner** · Sep 6, 2007 11:27

ok I've tried the label but it does the same thing as span

it looks kind of like this

Code:

                      [checkbox]I would like to receive free print-based CME/CE activities, clinical 
reports and CD-ROMs of thought-leader interviews.

// but should be

                      [checkbox]I would like to receive free print-based CME/CE activities, clinical 
                               reports and CD-ROMs of thought-leader interviews.

// note: this is not to scale :)

**CraniumDesigns** · Sep 6, 2007 11:37

u should post a live example, but i think you're saying the text is wrapping below the checkbox. i would just add a bit of bottom padding or margin to the checkbox to counteract this, or set a height value. not sure, but one of those should work.

OR

you could use a float: left on the checkbox, but then you'd have to clear the floats below all this. not sure you know about floats, but that should work. google it, or look on the FAQ in this forum.

**rozner** · Sep 6, 2007 13:43

I tried the padding and margin things, both didn't work for me, but the float did. I am familiar with floats, but they do confuse me sometimes, in the end that's what works for me. Thanks for your help.

**CraniumDesigns** · Sep 6, 2007 13:47

yay! no problem!

**Dan Schulz** · Sep 6, 2007 14:01

Bear in mind the example I'm providing isn't very user-friendly when it comes to forms due to the use of the universal selector, but if you're willing to redeclare the margins and padding on those elements you need to kill those properties on, it can be quite effective.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>CSS Based Form Layout</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css" media="screen,projection">
	
	* {
		margin: 0;
		padding: 0;
	}

	body {
		background: #FFF;
		color: #000;
		font: normal 85&#37;/140% "lucida console", tahoma, verdana, arial, helvetica, sans-serif;
		letter-spacing: 1px;
		padding: 0 1em;
	}

	h1 {
		background: #FFF;
		color: inherit;
		font: bold 1.95em/2em georgia, garamond, "times new roman", times, serif;
	}

	#example-form {
		padding: 0.5em 0;
	}
		#about {
			float: left;
			margin-right: 1em;
			width: 30em;
		}

		#survey {
			float: left;
			width: 33em;
		}

		.fieldset {
			background: #FFE;
			border: 1px solid #000;
			margin-bottom: 1.5em;
			padding: 1em 0 0.5em 0.5em;
			position: relative;
		}
			fieldset {
				border: 0;
				display: block;
			}
		
		legend span {
			background: #CFC;
			border: 1px solid #000;
			color: #00C;
			padding: 0 0.25em;
			position: absolute;
				top: -0.75em;
			}
		}

		label {
			margin: 0.25em 0;
			vertical-align: middle;
		}
			#about label {
				clear: left;
				float: left;
				padding-top: 0.1em;
				width: 14em;
			}

			#survey label:hover {
				background: #FFE;
				color: #00F;
				font-weight: bold;
			}

		input {
			margin-bottom: 0.5em;
			padding: 0 0.25em;
			vertical-align: middle;
		}
			#about input {
				background: #FCFBFA;
				color: inherit;
				width: 14em;
			}

			#survey input {
				margin: 0 0.25em 0 0;
				padding: 0;
				width: auto;
			}

		select, textarea {
			margin: 0.5em 0.25em;
		}

		select {
			background: #FCFBFA;
			color: inherit;
		}

		textarea {
			background: #FCFBFA;
			color: inherit;
			padding: 0.5em;
		}

		textarea:active, textarea:focus, textarea:hover {
			background: #FFF;
			color: inherit;
		}

		.controls {
			clear: left;
		}

	</style>
</head>
<body>
<h1>Semantic Forms with (X)HTML and CSS</h1>
<form action="#" id="example-form" method="post">
	<div id="about">
		<div class="fieldset">
			<fieldset>
				<legend><span>Basic Information</span></legend>
				<label for="name">Your Name:</label> <input id="name" type="text" size="30" /><br />
				<label for="email">Your Email Address:</label> <input id="email" type="text" size="30" />
			</fieldset>
		</div>
		<div class="fieldset">
			<fieldset>
				<legend><span>What Is Your Favorite Color?</span></legend>
				<select name="sections">
					<option value="0">--select one--</option>
					<option value="1">Black</option>
					<option value="2">Blue</option>
					<option value="3">Brown</option>
					<option value="4">Green</option>
					<option value="5">Grey</option>
					<option value="5">Orange</option>
					<option value="6">Purple</option>
					<option value="7">Red</option>
					<option value="8">White</option>
					<option value="0">Yellow</option>
					<option value="10">Other/No Preference</option>
				</select>
			</fieldset>
		</div>
		<div class="fieldset">
			<fieldset>
				<legend><span>Tell Us About Yourself</span></legend>
				<div>
					<textarea rows="10" cols="40"></textarea>
				</div>
			</fieldset>
		</div>
	</div>
	<div id="survey">
		<div class="fieldset">
			<fieldset>
				<legend><span>What browsers are installed on your computer?</span></legend>
				<div>
					<label for="msie"><input id="msie" type="checkbox" name="browser" value="Microsoft" /> Internet Explorer</label><br />
					<label for="netscape"><input id="netscape" type="checkbox" name="browser" value="Netscape" /> Netscape Browser</label><br />
					<label for="mozilla"><input id="mozilla" type="checkbox" name="browser" value="Mozilla" /> Mozilla FireFox</label><br />
					<label for="opera"><input id="opera" type="checkbox" name="browser" value="Opera" /> Opera Web Browser</label><br />
					<label for="konqueror"><input id="konqueror" type="checkbox" name="browser" value="Konqueror" /> Konqueror KDE</label><br />
					<label for="safari"><input id="safari" type="checkbox" name="browser" value="Apple" /> Safari Web Browser</label><br />
					<label for="another-browser"><input id="another-browser" type="checkbox" name="browser" value="Other" /> Something Else</label>
				</div>
			</fieldset>
		</div>
		<div class="fieldset">
			<fieldset>
				<legend><span>What do you use to build your Web sites?</span></legend>
				<div>
					<label for="golive"><input id="golive" name="editor" type="radio" value="Adobe GoLive" /> Adobe GoLive</label><br />
					<label for="dreamweaver"><input id="dreamweaver" name="editor" type="radio" value="Macromedia Dreamweaver" /> Macromedia Dreamweaver</label><br />
					<label for="frontpage"><input id="frontpage" name="editor" type="radio" value="Microsoft FrontPage" /> Microsoft FrontPage</label><br />
					<label for="hand"><input id="hand" name="editor" type="radio" value="A Text Editor" /> Text Editor</label><br />
					<label for="other"><input id="other" name="editor" type="radio" value="Other" /> Something Else</label>
				</div>
			</fieldset>
		</div>
	</div>	
	<div class="controls">
		<input class="submit" type="submit" value="Submit Form" /> <input class="reset" type="reset" value="Clear Form" />
	</div>
</form>
<div>
	Copyright &copy; 2006-2007, The Monster Under the Bed. All Rights To Scare
	Unsuspecting Children Reserved.
</div>
</body>
</html>

User Tag List

Thread: css form problem

Thread Tools

Display

css form problem

Bookmarks

Bookmarks

Posting Permissions