RE: CSS Positioning Solution was: CSS positioning aint good enoug h?

In August of last year, AListApart ran an article by Mark Newhouse called
"Practical CSS Layout."

http://www.alistapart.com/stories/practicalcss/

In the article, he showed how to display a form with CSS.  I thought that
there was too much markup being used, so I set out to create my own CSS
form.  The following markup works in IE 5+, NN 6+ and Opera 6+.  It it
written in XHTML, styled with CSS and validates perfectly.  It also displays
well in the Lynx emulator.

You can view the file online here:
http://www.r2communications.com/cssTests/form_final.htm

And here is the markup:

<!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" xml:lang="en" lang="en">
<head>
	<title>Untitled</title>
	<style type="text/css" media="screen">
	body {
		font-family: arial;
		font-size: 12px;
		line-height: 17px;
		color: black;
		background-color: inherit; }
	
	form {
		display: block; }
		
	fieldset {
		width: 576px;
		height: auto;
		padding: 10px;
		border: 2px solid black; }
		
	legend {
		font-weight: bold;
		color: #990000;
		background-color: inherit; }
		
	div.controls {
		width: 600px;
		margin-top: 1em;
		text-align: right; }	
		
	div.row {
		position: relative;
		height: 25px;
		margin-top: 10px; }	
		
	span.label {
		float: left;
		width: 135px;
		color: #000000;
		background-color: #e2e2e2;
		padding-right: 5px;
		margin-right: 10px;
		line-height: 23px;
		font-weight: bold;
		text-align: right; }		

	</style>
	<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
	<form name="form" id="form" action=" ">
	<fieldset>
		<legend>this is the legend</legend>
		<div class="row"><label for="a"><span class="label">First
Name:</span></label><input type="text" id="a" /></div>
		<div class="row"><label for="b"><span class="label">Last
Name:</span></label><input type="text" id="b" /></div>
	</fieldset>
		<div class="controls"><input type="submit" id="submit"
value="Submit" /></div>
	</form>
</body>
</html>

Randal Rust
Covansys, Inc.
Columbus, OH

Received on Friday, 26 April 2002 09:33:47 UTC