|
CSS - Submit Buttom Sit Not Properly After Submit Invalid Input
Hi;
i am trying to write a register form for user. i got a problem that the sign up of submit bottom doesn't sit properly after fill some invalid input and click the sign up bottom. but before fill anything to form, everything sit ok, no problem at all. And this problem happens in the IE browser, not in the Firefox browser. Could anyone help me find out the problem, please. please go to the link. http://writeanything.org/Register.php valid password 1) at least 8 char 2) at one lower char 3) at least one upper char 4) at least one digit please fill some invalid input to see the different before and after that. my code as following: Register.php PHP Code: <?php session_start(); ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title> Welcome to login </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <head> <style type="text/css"> body{ padding: 0px; margin: 0px; border: 0px; background-color: white; } #container{ padding: 0px; border-top: 2px solid #1d2add; border-bottom: 2px solid #1d2add; border-left: 1px solid #3b44b5; border-right: 1px solid #3b44b5; margin-left: auto; margin-right: auto; margin-top: 5%; margin-bottom: auto; width: 330px; height: 370px; } #t1{ font-weight: bold; font-size: 18px; color: white; background-color:#3542eb; } form{ padding:0px; border: 0px; margin: auto; width: 280px; } #JoinMe { background-color: #41ac1c; padding: 2px; border: 2px solid #94e07a; color: white; font-size: 12px; font-weight: bold; } #JoinMe:hover { background-color: #237516; border: 2px solid #104108; padding: 2px; } table{ padding: 0; border: 0; margin: 0; } tr{ padding: 0; border: 0; margin: 0; } td{ padding: 0; border: 0; margin: 0; } .errorM{ padding:0; margin:0; font-weight: bold; font-size: 12px; color: red; background-color:white; } </style> </head> <body> <div id="container"> <form action="/RegisterP2.php" method="post"> <table> <tr><td colspan="2" id="t1">Welcome to join xxxx</td></tr> <?php if($_SESSION['register_flag']==0) echo ("<tr><td colspan=\"2\" class=\"errorM\">some invalid field below, please reenter again.</td></tr>"); ?> <tr><td> Email Address:</td><td><input type="text" name="email" maxlength="60" value="<?php if($_SESSION['register_flag']==0) echo $_SESSION['register_email']; ?>"><?php if($_SESSION['register_errorM_Email']!="") { echo "<span class=\"errorM\">"; echo $_SESSION['register_errorM_Email']; echo "</span>"; } ?></td></tr> <tr><td>Password:</td><td><input type="password" name="pass1" maxlength="30"><?php if($_SESSION['register_errorM_Password']!="") { echo "<span class=\"errorM\">"; echo $_SESSION['register_errorM_Password']; echo "</span>"; } ?></td></tr> <tr><td>Confirm Password:</td><td><input type="password" name="pass2" maxlength="30"><?php if($_SESSION['register_errorM_Password']!="") { echo "<span class=\"errorM\">"; echo $_SESSION['register_errorM_Password']; echo "</span>"; } ?></td></tr> <tr><td colspan="2"><hr></td></tr> <tr><td> Display Name:</td><td><input type="text" name="DisplayName" maxlength="30"></td></tr> <tr><td> First Name:</td><td><input type="text" name="FirstName" maxlength="30"></td></tr> <tr><td>Last Name:</td><td><input type="text" name="LastName" maxlength="30"></td></tr> <tr><td>Country:</td><td><input type="text" name="Country" maxlength="30"></td></tr> <tr><td>State or City:</td><td><input type="text" name="StateCity" maxlength="30"></td></tr> <tr><td colspan="2"><hr></td></tr> <tr><td>Age</td><td><input type="text" name="age" maxlength="30"></td></tr> <tr><td>Gender:</td><td><input type="radio" checked="checked" name="Sex" value="male">Male <input type="radio" checked="checked" name="Sex" value="female">Female </td></tr> <tr><td colspan="2" align="right"> <input type="submit" name="Join" value="Sign Up" id="JoinMe"></td></tr> </table> </form> </container> </body> </html> ///////////////// RegisterP2.php PHP Code: <?php session_start(); //error massage for validate form $_SESSION['register_errorM_Email']=""; $_SESSION['register_errorM_Password']=""; //flag to check user input, 1=valid, 0=invalid $_SESSION['register_flag']=1; if(isset($_POST['Join'])){ $email_pattern = '#.*@.*\..*#'; $_SESSION['register_email'] = $_POST['email']; //email pass validation; if (preg_match($email_pattern, $_POST['email']) > 0) { } else{ //not validate $_SESSION['register_errorM_Email']="**"; $_SESSION['register_email'] =""; $_SESSION['register_flag']=0; } $password1 = $_POST['pass1']; $password2 = $_POST['pass2']; //valid if ($password2==$password1) { } else { $_SESSION['register_errorM_Password']="**"; $_SESSION['register_flag']=0; } //valid if (preg_match("/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/", $password1)) { } else { $_SESSION['register_errorM_Password']="**"; $_SESSION['register_flag']=0; } //valid if (preg_match("/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/", $password2)) { } else { $_SESSION['register_errorM_Password']="**"; $_SESSION['register_flag']=0; } if( $_SESSION['register_flag']==1) header('Location:RegisterP3.php'); else header('Location:Register.php'); } ?> Similar TutorialsSo, what would I like to have? A css rule that would affect visual appearance of only the <input type="submit"> elements (or any other sub-type of <input>, but again, affecting that sub-type only). Is it possible to do? How? I have a lot of .NET pages with a LOT of submit buttons (within datagrids and regular buttons too). There is a way to do it programaticaly in source code of .NET pages, but I'd like an elegant solution like css, which could be done without recompiling entire project. Any help is highly appreciated. I found this great website that shows me how to create these great buttons with some images. http://www.dynamicdrive.com/style/csslibrary/item/css_oval_buttons/ How can I do this with a button instead of a link??? Here is my problem: keoasian .com/details If you look at the contact form, it does not properly line up. I've had this problem on another site before but I forget how I fixed it. The solution is probably simple, I just can't think of it. By the way, this may not show up on all browsers as a problem. I initially designed and tested this page on a Windows XP machine with 1024x768 running Google Chrome; now I am on a Mac OSX computer with 1280x800 resolution testing it on Chrome and Firefox. Hi there. I am looking through a style sheet from a site and was just wondering what this line would apply to: Code: submit { font-size: 10px; border: thin #A9D5F5 solid;
background-color: #395980; color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 0px; word-spacing: 1pt;
}
I guessed submit buttons but it's nothing to do with them. Thanks Colin Anyone know a trick to get a submit button to display on the same line as an input field and not have it drop. My issue is that it is either pushed down a few pixels, or up a few pixels, as if something is padded. Code: <form action="#" method="post">
<span>Join our mailing list</span>
<input type="text" name="email" value="your e-mail address" class="v-email" />
<input type="submit" value="" name="submit" class="btn" />
</form>
In the above example, the submit button is pushed down a few pixels as if it is padded. In Firefox however, it is pushed up a couple pixels. How can I get it to display inline perfectly. Assume that the styled button and the input field are the same height. I have a form which includes an image as the submit button. I am trying to get the submit button to perform a hover effect but I don't know if I am wasting my time because it may be impossible. This is what I have so far: Code:
div#links span {
display: none;
}
div#links span:hover {
display: block;
position: absolute;
z-index: 2;
width: 125px;
padding: 20px;
color: #ffffff;
background: #369;
filter: alpha(opacity=75);
opacity: 0.75;
-moz-opacity: 0.75;
}
<div id="links">
<input type="image" src="sticky_note_icon.png" value="Submit" alt="Submit">
<span>Some text</span>
</div>
Thanks in advance Do any questions get answered here? How would I get a simple input form to align with a submit button? You can see the problem at: bit.ly/ovFGhR The CSS txt file: bit.ly/nMyP45 My CSS I think is telling the input text box to be a part of the paragraph above and the button sits below, misaligned. Please help!! Hi there, I have a simple submit button with the word "Search!" as the value. However, in FF, it is appearing aligned nearer the bottom of the button where as in IE it is centered correctly. This is what I mean: This is my CSS: PHP Code: .search_button{ background: url("images/search.jpg") repeat-x; border: 0px solid ; font-family: verdana, Arial, Helvetica, sans-serif; color: #373737; font-size: 11px; width: 80px; height: 24px; font-weight: bold; vertical-align:middle; } and my HTML: PHP Code: <input name="" type="submit" value="Search!" class="search_button"/> Any ideas why this is and how I can center it in FF? CSS Code: #manageSubmit {
width: 100%;
margin: 0 auto;
}
HTML Code: <div id="manageSubmit"> <INPUT TYPE="Submit" value=" Finish and Checkout "> </div> Everything else on the page is centered correctly but the submit button. The default behaviour for an <input type="submit ... /> is to add a certain amount (perhaps some percentage of the length of the text?) of blank of space to the right and left of the text that is displayed within the button. Very ugly for buttons with long labels. Is there any way to control this without hardcoding a width value? Is it possible to display a submit button in a form as a regular link? I'm not allowed to use Javascript, so it has to be done in CSS. Thanks Hi all, I've got a standard 'submit' button that I've applied a CSS style to, with this code: <input type="submit" name="sign in" value="sign in" style="font-weight: bold; color: #FFFFFF; font-size: 10px; border: 1px solid #FFFFFF; background: #A4B1C1;"> The only problem I'm having is that in IE, there's a black border around it, but in Firefox, there's only the white border stated in the CSS style. Can anybody tell me how I can fix this? Cheers. I have created a nice tablesless form with CSS except for the submit buttons. I can't seem to align them to the middle and in IE6 they overflow the form border html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>Interest</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <STYLE TYPE="text/css"> <!-- #Interest label,#Interest input { display: block; width: 200px; float: left; margin-bottom: 10px; } #Interest label { text-align: left; width: 150px; padding-right: 20px; font-weight: bold; } #Interest br { clear: left; } #Interest form { border : 1px solid #000; padding : 5px; } --> </STYLE> </HEAD> <BODY> <DIV ID="Interest"> <FORM METHOD="POST" ACTION="/cgi-bin/form.pl"> <INPUT TYPE="HIDDEN" NAME="form_owner" VALUE="paul.wright@npl.co.uk"> <BR> <LABEL FOR="name">Name</LABEL> <INPUT NAME="name" ID="name"><BR> <LABEL FOR="company">Organisation</LABEL> <INPUT NAME="company" ID="company"><BR> <LABEL FOR="email">E-mail address </LABEL> <INPUT NAME="email" ID="email"><BR> <LABEL FOR="phone">Telephone no. </LABEL> <INPUT NAME="phone" ID="phone"><BR> <LABEL FOR="outcome">Comment(s) </LABEL> <TEXTAREA NAME="outcome" ROWS="10" COLS="60" ID="outcome"></TEXTAREA> <BR> <INPUT TYPE="SUBMIT" VALUE="Submit Interest" NAME="Submit1" ID="Submit1"> <INPUT TYPE="RESET" NAME="Reset1" VALUE="Clear Form" ID="Reset1"><BR> </FORM> </DIV> </BODY> </HTML> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Hi, just a quick question. Say I have two input buttons (Just like the submit post/preview post buttons at the bottom of the forms). Code: <input type="submit" value="blah" /> <input type="submit" value="lol" /> If I want to align them in the center of the row that they're on, I've had to wrap them in a <div> with the text-align: center attribute on the div. Is there anyway to accomplish this same purpose without having to use wrapper <div>s? I have form located below the google map on this page - http://www.hometowntrans.com/map_hours.asp I want to style it such that it has a 3d look to it if you will, with a gray background and black text. Hey any idea why submit button at this page is not working??? http://www.ajilanyureq.com Hi when using a submitbutton (<INPUT TYPE=SUBMIT ...) then the browser makes a grey button with big spaceing left and rigth of the button-text. How can I get rid of this spacing?? I tryed style="margin:0;padding:0;border:0;background-color:#FFFFFF;" The grey desapears, but the big spacing left and rigth is still there. I am aware of image-submitbuttons, but i want to have text-submitbutton. I want to use only html and css. so no images, no javascript, no ... thanks in advanc for help When viewed in IE my form's submit button shows up with a black border around it, and when clicked onto another blank space of the space, it goes to normal colors as applied in this css code. Code: font-family:verdana,arial,helvetica,sans-serif; font-size:12px; background-color: #FFFFFF; color : #000000; border: 1px solid #A5B4BC; What could fix this? Thank you. Hi there, I have a form with a text field and a submit link (text), however in IE, the link appears lower down than in FF. Ideally I would like to have the link vertically centered to the text field. This is a screen shot of what I mean. Any ideas how I can sort this out? I'm having trouble setting the background image of a submit button. This is my code: Code: <input class="submit" type="submit" name="submit" value="Submit" style="background-image:url('img/enter.jpg');" />
I've also tried putting the css in my external css file in the .submit tag... didn't work. I know the path to the image is correct because the following works: Code: <input type="image" src="img/enter.jpg" /> What gives? Thanks |
|||||||