csss format

**ravi951** · 07-28-2011, 05:49 AM

hi all,
i have a simple form with 5 fields username,email id,password,retype password and phone no.they all to be displayed in correct format as one after other.my am getting error for last field i.e.,phone no is is not displayed properly
how to display the 5th field in correct format...below is the code i have written in css..

if there are more than 4 fields tell me how to display all in correct format.

.form label
{
float:left;
width:100px;
padding:10px 10px 0 10px 0;
font-weight:bold;
}

**traq** · 07-28-2011, 02:12 PM

Please post a link to the page on your site that contains the problematic script so we can check it out.

**ravi951** · 07-29-2011, 05:37 AM

below is my complete css script....
also i have given my html script with fields....
for all the fields given in html it must display in same order...

Code:

* 
{
 margin:0; 
 padding:0;
}

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

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

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

.form label 
{
  float:left; 
  width:100px; 
  padding:10px 10px 0 10px; 
  font-weight:bold;
  clear:left;
}

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

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

.form .submit 
{
  clear:both;
}

#msg 
{
  display:none; 
  position:absolute; 
  z-index:200; 
  background:url(images/msg_arrow.gif) left center no-repeat; 
  padding-left:7px;
}

#msgcontent 
{
  display:block; 
  background:#f3e6e6; 
  border:2px solid red; 
  border-left:none; 
  padding:5px; 
  min-width:150px; 
  max-width:250px;
}
[

below is my html code with fields.....

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>Dynamic Inline Form Validation Demo</title>
<link rel="stylesheet" type="text/css" href="messages.css" />
<script type="text/javascript" src="messages.js"></script>
</head>
<body>
<div id="wrapper">
  <form name="form" id="form" class="form" action="success.html" onsubmit="return validate(this)" method="post">
    <label for="name">Full Name:</label>
    <input type="text" name="name" id="name" />
    
	<label for="email">Email Address:</label>
    <input type="text" name="email" id="email" />
    
	<label for="password">Password:</label>
    <input type="text" name="password" id="password" />
	
    <label for="repassword">Retype Password:</label>
    <input type="text" name="repassword" id="repassword" />
	
	<label for="phoneno">Phone no:</label>
    <input type="text" name="phoneno" id="phoneno" />
	
	<input type="submit" value="Submit" class="submit" />
  </form>
</div>
</body>
</html>

**traq** · 07-29-2011, 08:15 PM

your code doesn't seem to have any obvious problems. I'm viewing this on Firefox 3.16; what browser(s) do you see the problem in? can you be more specific about what the result should look like?

**ravi951** · 07-30-2011, 04:33 AM

i am using internet explorer 8.i have not worked on other browsers.
after entering fields for username,email id,and password and then clicking the submit button it should ask for "please retype ur password" and then it should check whether both passwords and retype passwords are matching or not...
but in my code it is displaying the message "passwords are not matching.please reenter" even before we are inserting into retype password.....
that is my problem.....

**traq** · 07-30-2011, 05:20 AM

Originally Posted by ravi951

i am using internet explorer 8.i have not worked on other browsers.
after entering fields for username,email id,and password and then clicking the submit button it should ask for "please retype ur password" and then it should check whether both passwords and retype passwords are matching or not...
but in my code it is displaying the message "passwords are not matching.please reenter" even before we are inserting into retype password.....
that is my problem.....

this seems to be completely unrelated to your original post:

Originally Posted by ravi951

hi all,
i have a simple form with 5 fields username,email id,password,retype password and phone no.they all to be displayed in correct format as one after other.my am getting error for last field i.e.,phone no is is not displayed properly
how to display the 5th field in correct format...below is the code i have written in css..

if there are more than 4 fields tell me how to display all in correct format.

is this correct? do you have a problem with the layout, or only with how the script is processed?

if it's just the submit process that you're trying to work out, then:

1) does your password check happen client-side (i.e., javascript) or server-side (e.g., php)?

2) choose the appropriate DD forum (those are not css problems) and PM a moderator and ask to move this thread to the proper forum (javascript, php, whatever is appropriate).

3) post the code that is related to your password check.

**dcr33** · 07-31-2011, 04:18 PM

Hi
You have a small typo in your code. Remove the "[" from your CSS code at the end.
Also you can remove this portion as it is unnecessary I feel so -
*
{
margin:0;
padding:0;
}
Then it will work fine.

**traq** · 07-31-2011, 04:39 PM

Originally Posted by dcr33

Also you can remove this portion as it is unnecessary I feel so -
*
{
margin:0;
padding:0;
}
Then it will work fine.

that's a (limited) attempt at a css "reset." by setting the margin and padding on everything to zero, you can limit the differences in appearance across browsers by overriding their default values. especially in the case of menus, it's usually necessary to remove browser defaults (or override them) to keep the menu items lined up as desired. We also don't know what other layout features on his page might rely on these lines.

css reset

the disadvantage is that, by "zeroing" everything, you have to remember to define it all again the way you want it. many people ignore that step and their layout suffers. a more "production-ready" approach is something like normalize, which is a similar concept but gives "useful" default values while ironing out browser differences (and, it's very well-commented, so it's a good learning tool too).

---------------------------------
unfortunately, from ravi's last reply, I'm not even sure what problem he's actually trying to solve now.

**wodeln** · 08-01-2011, 04:36 AM

.form
{
float:left;
padding:10px 10px 10px 10px;
background:lightblue;
border:2px solid white;
}
you can add width:270px; you will fix it .

Thread: csss format

Thread Tools

Search Thread

csss format

reply

reply

Bookmarks

Bookmarks

Posting Permissions