Log in

View Full Version : Magic Submit Button!


Rain Lover
12-18-2010, 09:12 PM
Hi,

The following code seems to be valid:


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


<!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
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! :)
coothead
12-22-2010, 04:41 PM
No problem, you're very welcome. ;)

Unfortunately I was unable to supply you with a link that might verify my assertion. :(
coothead
efini93
12-22-2010, 06:05 PM
It doesn't make a difference.
It probably didn't work because you kept the same width(500px) for both.