Wrox Programmer Forums
|
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old August 11th, 2011, 07:01 AM
Authorized User
 
Join Date: Jul 2011
Posts: 49
Thanks: 0
Thanked 0 Times in 0 Posts
Default css fields problem

hi all,
i have created one simple login form with 5 fields as shown below.
my fields are not in straight line with their corresponding colons.my fields are slightly above their corresponding colons.
kindly tell me how to make fields with their corrresponding colons as equal.
means like the below one...
Username :

below is my html code.......
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>
<h1>Login Form </h1>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Inline Form Validation Demo</title>
<link rel="stylesheet" type="text/css" href="messages1.css" />
<script type="text/javascript" src="messages1.js"></script>
</head>
<body>
<div id="wrapper">
  <form name="form" id="form" class="form" action="success1.html" onsubmit="return validate(this)" method="post">
    <label for="name">User Name<span>:</span></label>
    <input type="text"  name="realname" id="name" />
	<span id="realnameerror"></span>
    
	<label for="email">Email Id<span>:</span></label>
    <input type="text"  name="email" id="email" />
	<span id="emailerror"></span>
    
	<label for="password">Password<span>:</span></label>
    <input type="password"  name="password" id="password"  >
	<span id="passworderror"></span>
	
    <label for="repassword">Retype Password<span>:</span></label>
    <input type="password"  name="password2" id="password2" >
	<span id="password2error"></span>
	
	<label for="phoneno">Phone no<span>:</span></label>
    <input type="text"  name="phoneno" id="phoneno" maxlength="10" />
	<span id="phonenoerror"></span>
	
	<input type="submit" value="Submit" class="submit" />
  </form>
</div>
</body>
</html>
below is my css code.......
Code:
* 
{
 margin:5; 
 padding:5;
}

body 
{
  font:12px Verdana, Arial, Helvetica, sans-serif; 
  color:black;
}

#wrapper 
{ 
  width:800px; 
  margin:50px auto;
}

.form 
{
  float:left; 
  padding:10px 10px 10px 10px; 
  background:lightblue; 
  border:10px white;
 }

.form label 
{
  position:relative;
  float:left; 
  width:140px; 
  padding:10px 10px 0px 5px;
  font-weight:bold;
  clear:left;
}

.form label span
{
  position:absolute;
  top:0;
  right:5px;
  color:black;
}  

.form span
{
  float:left;
  margin-top:1em;
  margin-left:0.5em;
  color:red;
}

.form select 
{
  float:left; 
  width:146px;
  margin-top:10px;
}

.form input 
{ 
  width:11em;
  float:left; 
  margin-top:10px;
}

.form .submit 
{
    width:auto;
    clear:both;
}





Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS problem stuartlittle ASP.NET 2.0 Professional 1 March 11th, 2008 02:28 PM
Pure CSS Menu Showing Behind Form Fields in IE kwilliams CSS Cascading Style Sheets 10 November 19th, 2007 10:25 AM
CSS & Form Fields kwilliams CSS Cascading Style Sheets 2 May 17th, 2006 09:06 AM
CSS Menu problem twc02 CSS Cascading Style Sheets 24 March 11th, 2005 11:01 AM
CSS Problem Ben Horne HTML Code Clinic 2 November 10th, 2003 05:31 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.