Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    form's submit button disappears in some versions of IE

    I have not been able to replicate this error on any computer I have access to (mostly Macs, but a friend of mine tried it on IE7/Vista and could not replicate the problem either) . . . however, many of our customers are e-mailing us, telling us the submit button is missing. They all report using some version of IE. I'm not the one in direct contact with these customers so that's all I know.

    This the HTML (I've changed some of text, obviously, but the structure is intact):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title>problematic form example</title>
    		<link href="http://www.example.com/CSS/registration.css" rel="stylesheet" type="text/css" />
    		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    	</head>
    	<body>
    		<form method="post" action="registration.php">
    			<fieldset>
    				<legend>usage agreement</legend>
    				<p>blah blah blah, be good, we're not responsible for etc</p>
    			</fieldset>
    			<fieldset>
    				<legend>user preferences</legend>
    				<div>
    					<label for="username">username:</label>
    					<input name="username" id="username" type="text" />
    				</div>
    				<div>
    					<label for="time_zone">time zone:</label>
    					<input name="time_zone" id="time_zone" type="text" />
    				</div>
    			</fieldset>
    			<fieldset>
    				<legend>contact information</legend>
    				<p>If this information is incorrect <em>you will not receive your password</em> and will not be able to log in to the forum! We will never share your address with <em>anyone</em>.</p>
    				<div>
    					<label for="e-mail">e-mail address:</label>
    					<input name="e-mail" id="e-mail" type="text" />
    				</div>
    				<div>
    					<label for="e-mail_confirmed">confirm e-mail address:</label>
    					<input name="e-mail_confirmed" id="e-mail_confirmed" type="text" />
    				</div>
    			</fieldset>
    			<fieldset>
    				<legend>please verify that you own our product</legend>
    				<p>This information will <em>only</em> be used to verify your purchase of our product.  We will never share your name with <em>anyone</em></p>
    				<div>
    					<label for="activation_code">forum activation code:</label>
    					<input name="activation_code" id="activation_code" type="text" />
    				</div>
    				<div>
    					<label for="full_name">full name of the person who purchased our product from our store:</label>
    					<input name="full_name" id="full_name" type="text" />
    				</div>
    			</fieldset>
    			<fieldset>
    				<p>Please make sure all of the above is correct before clicking the submit button. By submitting this form, you are agreeing to the usage agreement at the top of this page and are bound to its terms and conditions.</p>
    				<input type="submit" id="submit" value="submit" class="click" />
    				<p>If you can't see the submit button or you have any other problems with this form, e-mail the form information to info@example.com.  We apologize for any inconvenience.
    			</fieldset>
    		</form>
    	</body>
    </html>
    and this is the CSS:

    body {margin: 10px 0; font: 14px/20px "Lucida Grande", Geneva, Verdana, sans-serif;}
    fieldset {padding: 10px 20px; width: 560px; position: relative; left: 50%; margin: 10px 0 10px -295px; border: solid 2px #7B7B7B; background: #DBDBDB;}
    legend {font-weight: bold;}
    label {display: block;}
    input {width: 250px; margin-bottom: 10px;}
    em {font: italic 17px/20px "Times New Roman", serif;}
    #submit {width: 100px;}
    a:link {color: #06A;}
    a:visited {color: #43A;}
    a:hover {color: #048;}
    a:active {color: #08C;}


    Does anyone have any idea what's wrong? If someone could replicate the error on some version of IE, then maybe we can experiment.

    Thanks in advance!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,915
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    The negative left margin of the fieldset(s) is also moving the submit button to the left, and as soon as it’s outside of the boundaries of the fieldset it’s being hidden. I’m not sure why you’re doing that anyway. Looks like you’re trying to center the fieldsets but that can easily be achieved with margin: auto; (i.e. left and right margin set to auto).

  • #3
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks.

    The reason I was using this centering method instead of the auto-margin method is because it takes slightly less code in certain situations and I'm just used to it. I was under the impression that it always worked properly, but after this issue I'm going to start using the auto-margin method.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •