Magic Submit Button!

**Rain Lover** · 12-18-2010, 09:12 PM

Hi,

The following code seems to be valid:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Sample Form</title>

<style type="text/css">

input {width:500px; padding:3px; background:green; border:1px solid red;}

textarea {width:500px; height:150px; padding:3px; background:green ; border:1px solid red;}

</style>

</head>
<body>

<form action="">

<p><input id="entry_0"><label for="entry_0">Name</label></p>

<p><input id="entry_1"><label for="entry_1">Email</label></p>

<p><input id="entry_2"><label for="entry_2">URL</label></p>

<p><textarea id="entry_3" rows="5" cols="5"></textarea></p>

<p><input type="submit" value="Submit"></p>

</form>

</body>
</html>

However, the submit button width is shorter than other fields. Strangely when I remove the doctype declaration, they all get the same length. What am I doing wrong and how can I make them the same size?

Thanks in advance!
Rain Lover

**efini93** · 12-22-2010, 05:29 AM

Its always better to have them separate in my opinion and don't use input use their ID or use input[type="text"] {} for the text fields and input[type="submit"] {} for the submit button

**Rain Lover** · 12-22-2010, 09:16 AM

Originally Posted by efini93

Its always better to have them separate in my opinion and don't use input use their ID or use input[type="text"] {} for the text fields and input[type="submit"] {} for the submit button

It doesn't make a difference.

**coothead** · 12-22-2010, 12:33 PM

Hi there Rain Lover,

Strangely when I remove the doctype declaration, they all get the same length.

Using "Quirks Mode" may appear to offer a solution to the problem but it is obviously not an ideal method of coding.

In "Standards Compliance Mode", if the width or height values of the input elements - (type submit and reset) are defined,
then border or padding values will be contained within that value.

This means that in your example the width of the submit button needs to be 508px - (500px width + 6px padding + 2px border).

Here is your modified example code...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Sample Form</title>

<style type="text/css">
input {
   width:500px;
   padding:3px;
   border:1px solid red;
   background:green;
 }
textarea {
   width:500px;
   height:150px;
   padding:3px; 
   border:1px solid red;
   background:green ;
 }
#submit {
   width:508px;
 }
</style>

</head>
<body>

<form action="#">
<p><input id="entry_0"><label for="entry_0">Name</label></p>
<p><input id="entry_1"><label for="entry_1">Email</label></p>
<p><input id="entry_2"><label for="entry_2">URL</label></p>
<p><textarea id="entry_3" rows="5" cols="5"></textarea></p>
<p><input id="submit" type="submit" value="Submit"></p>
</form>

</body>
</html>

coothead

**Rain Lover** · 12-22-2010, 03:22 PM

Originally Posted by coothead

In "Standards Compliance Mode", if the width or height values of the input elements - (type submit and reset) are defined,
then border or padding values will be contained within that value.

That's the reasonable explanation I was waiting for. Your answers are always quality!
Thanks!