Magic Submit Button!

HTML & CSS
1

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. What am I doing wrong and how can I make them the same size?

Thanks in advance!
Rain Lover

2

Hi Rain Lover, welcome to SitePoint. :slight_smile:

The code may be valid, but there’s no excuse for using an outdated doctype. :wink:

Anyhow, browser defaults are to blame here. They are calculating the box size differently from the other inputs because it’s a submit button.

Anyhow, if you set a different width it looks fine on Safari and Firefox (I didn’t test other browsers).

input[type="submit"] {width: 508px;}
3

Generally the LABEL is placed on the left-hand side of the input controls in a Left-to-right direction directional text flow page. The Attribute selector won’t work on the aged M$IE 6.0.

4

Submit buttons and selects use the “broken box model” by default (unlike text inputs and textareas) so that means padding and borders are included inside any dimensions that have been set. (I’m not sure who thought this was a good idea at the time but its a real pain to have separate rules for those two elements. :))