View Single Post
  #4  
Old Saturday, October 14, 2006
Leonidas's Avatar
Leonidas Leonidas is offline
Administrator
 
Join Date: Mar 2000
Location: Islamabad
Posts: 556
Thanks: 330
Thanked 1,084 Times in 209 Posts
Leonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud of
Default

You only supplied CSS code and forgot the HTML - XHTML code. I can't help with looking at the entire code. Between The code below is an example of a CSS based tableless form. Hope this helps!

Code:
<!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>Advanced Form</title>
<style type="text/css">
<!--

body {
	font: 62.5%/1 "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}

.clear {
  clear: both;
}

form {
  font-size: 1.4em;
	width: 40em;
}


/* fieldset styling */
fieldset {
	margin: 1em 0; /*  space out the fieldsets a little*/
	padding: 1em;
	border : 1px solid #ccc;
	background-color:#F5F5F5
}

/* legend styling */
legend {
	font-weight: bold;
}

form p {
  position: relative;
	width: 100%;
}

/* style for  labels */
label {
	float: left;
	width: 10em;
}

#remember-me label {
  width: 4em;
}

/* style for required labels */
label .required {
	font-size: 0.83em;
	color:#760000;
}

/* style error messages */
label .feedback {
	position: absolute;
	margin-left: 11em;
	left: 200px;
  right: 0;
	font-weight: bold;
	color:#760000;
	padding-left: 18px;
	background: url(images/error.png) no-repeat left top;
}

/* :KLUDGE: Explicitly set the width for IE6- */
* html .feedback{
  width: 10em;
}

input {
  width: 200px;
}

input[type="text"], textarea {
	border-top: 2px solid #999;
	border-left: 2px solid #999;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}

input.radio, input.checkbox, input.submit {
  width: auto;
}

/* style form elements on focus */
input:focus, textarea:focus {
	background: #ffc;
}

input.radio {
  float: left;
	margin-right: 1em;
}

textarea {
	width: 300px;
	height: 100px;
}

/* Date of Birth form styling */

#monthOfBirthLabel, #yearOfBirthLabel {
  text-indent: -1000em;
	width: 0;
}

#dateOfBirth {
  width: 3em;
	margin-right: 0.5em;
}

#monthOfBirth {
  width: 10em;
	margin-right: 0.5em;
}

#yearOfBirth {
  width: 5em;
}

/* Color form styling */
#favoriteColor {
  margin: 0;
	padding: 0;
	border: none;
	background: transparent;
}

#favoriteColor h2 {
  width: 10em;
	float: left;
	font-size: 1em;
	font-weight: normal;
}

#favoriteColor div {
  width: 8em;
	float: left;
}

#favoriteColor label {
  /*width: 3em;*/
	float: none;
	display: inline;
}

/*#favoriteColor p {
	margin: 0.3em 0;
}*/


-->
</style>
</head>

<body>

<form id="comments_form" action="#" method="post">

<fieldset>
	<legend>Your Contact Details</legend>
	<p>
	<label for="author">Name: <span class="required">(Required)</span></label>
	<input name="author" id="author" type="text" />
	</p>
	
	<p>
	<label for="email">Email Address: </label>
	<input name="email" id="email" type="text" />
	</p>
	
	<p>
	<label for="url">Web Address:</label>
	<input name="url" id="url" type="text" />
	</p>
</fieldset>

<fieldset>
	<legend>Personal Information</legend>
	
	<p>
	<label for="author">Place of Birth: </label>
	<select>
  <option value="USA" selected="selected">USA</option>
  <option value="UK">United Kingdom</option>
  </select>
	</p>
	
	<p>
	<label for="dateOfBirth">Date of Birth:</label>
  <input name="dateOfBirth" id="dateOfBirth" type="text"  />
	
  <label id="monthOfBirthLabel" for="monthOfBirth">Month of Birth:</label>
  <select name="monthOfBirth" id="monthOfBirth">
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  </select>
	
  <label id="yearOfBirthLabel" for="yearOfBirth">Year of Birth:</label>
  <input name="yearOfBirth" id="yearOfBirth" type="text" />
	</p>
	
	<fieldset id="favoriteColor">
	<h2>Favorite Color:</h2>
	
	<div>
	<p>
	<input class="checkbox" id="red" name="red" type="checkbox" value="red" />
	<label>red</label>
	</p>
	
	<p>
	<input class="checkbox" id="yellow" name="yellow" type="checkbox" value="yellow" />
	<label>yellow</label>
	</p>
	
	<p>
	<input class="checkbox" id="pink" name="pink" type="checkbox" value="pink" />
	<label>pink</label>
	</p>
	
	<p>
	<input class="checkbox" id="green" name="green" type="checkbox" value="green" />
	<label>green</label>
	</p>
  </div>
	
	<div>
	<p>
	<input class="checkbox" id="orange" name="orange" type="checkbox" value="orange" />
	<label>orange</label>
	</p>
	
	<p>
	<input class="checkbox" id="purple" name="purple" type="checkbox" value="purple" />
	<label>purple</label>
	</p>
	
	<p>
	<input class="checkbox" id="blue" name="blue" type="checkbox" value="blue" />
	<label>blue</label>
	</p>
	
	<p>
	<input class="checkbox" id="other" name="other" type="checkbox" value="other" />
	<label>other</label>
	</p>	
  </div>
	<br class="clear" /> 
	</fieldset>
	

	
</fieldset>

<fieldset>
	<legend>Comments</legend>
	<p>
	<label for="text">Message: <span class="required">(Required)</span></label>
	<textarea name="text" id="text" cols="20" rows="10"></textarea>
	</p>
</fieldset>

<fieldset id="remember-me">
	<legend>Remember Me</legend>
		<p>
		<input id="remember-yes" class="radio" name="remember" type="radio" value="yes" />
		<label for="remember-yes">Yes</label>
		</p>
		
		<p>
		<input id="remember-no" class="radio" name="remember" type="radio" value="no" checked="checked" />
		<label for="remember-no">No</label>
		</p>
		
		<br class="clear" />
</fieldset>

<p><input id="submit" class="submit" name="submit" type="submit"/></p>


</form>
</body>
</html>
__________________
So which of the favors of your Lord would you deny?
Reply With Quote