...

View Full Version : form's submit button disappears in some versions of IE



DQ Carder
03-06-2008, 08:31 PM
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):


<!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!

VIPStephan
03-06-2008, 10:26 PM
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).

DQ Carder
03-07-2008, 05:07 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum