...

View Full Version : Magic Submit Button!



Rain Lover
12-18-2010, 09:58 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

Excavator
12-18-2010, 10:26 PM
Hello Rain Lover,
input {width:508px; padding:3px; background:green; border:1px solid red;}works.
I'm not sure why but the textarea obeys the box model (http://www.w3.org/TR/CSS2/box.html) rules by adding your padding/border to the 500px width.
The input button is putting your padding/border inside the 500px width.

Rain Lover
12-19-2010, 04:49 PM
Hello Rain Lover,
input {width:508px; padding:3px; background:green; border:1px solid red;}works.
I'm not sure why but the textarea obeys the box model (http://www.w3.org/TR/CSS2/box.html) rules by adding your padding/border to the 500px width.
The input button is putting your padding/border inside the 500px width.

When Excavator provides no definite explanation/solution, it means the problem is too complicated.

Apostropartheid
12-20-2010, 02:59 AM
You should not be using the DOCTYPE you are. For maximum compatibility, and to make our lives a lot easier, please always use a Strict DOCTYPE when creating a new document.

You can also cut down your form code to make it cleaner and more semantic quite easily.


<form action="" method="get">
<fieldset>
<input id="name" name="name" type="text"><label for="name">Name</label><br/>
<input id="email" name="email" type="text"><label for="email">Email</label><br/>
<input id="website" name="website" type="text"><label for="website">URL</label><br/>
<textarea id="message" name="message" rows="5" cols="5"></textarea>
<input type="submit" value="Submit">
</fieldset>
</form>

This has the added bonus of allowing browsers to auto-fill the user's data.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum