I'm currently working on a simple form template and its corresponding style sheet, but I've encountered an issue. When using the "double" border property to style forms, it seems to push the border beyond the containing element, which is affecting the overall appearance of the form.
Here's a link to a fiddle showcasing the problem: http://jsfiddle.net/Y9nFw/
Check out the CSS code below:
form {
margin:0;
padding:0;
}
fieldset {
font: normal 12px "Lucida Grande", Verdana, san-serif;
margin:0 0 10px 0;
padding:5px;
border:1px solid #333;
}
legend {
background-color: #DDD;
margin:0;
padding:5px;
border-style:solid;
border-width:1px;
border-color:#FFF #AAA #666 #FFF;
}
#name, #email, #message, #subject {
width:100%;
}
label {
font-weight:bold;
}
input, textarea {
border:3px double #333;
}
And here's the xhtml markup for the form:
<html>
<head>
<title>Chapter 9: Forms</title>
<link rel="stylesheet" type="text/css" href="css/screen/forms_table.css" />
</head>
<body>
<form action="" method="post" id="enquiryform">
<fieldset>
<legend>Enquiry Form</legend>
<table cellspacing="3" cellpadding="3" border="1">
<tr>
<td colspan="2">Fields market * are complusory.</td>
</tr>
<tr>
<td><label for="subject">Subject *</label></td>
<td><select name="subject" id="subject" tabindex="1">
<option value="">Select</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select></td>
</tr>
<tr>
<td><label for="name">Name *</label></td>
<td><input type="text" name="name" id="name" tabindex="2" /></td>
</tr>
<tr>
<td><label for="email">Email *</label></td>
<td><input type="text" name="email" id="email" tabindex="3" /></td>
</tr>
<tr>
<td colspan="2"><label for="message">Message or enquiry below</label></td>
</tr>
<tr>
<td colspan="2"><textarea name="message" id="message"
rows="11" cols="30" tabindex="4"></textarea></td>
</tr>
<tr>
<td><label for="updates">I would like to receive updates: </label></td>
<td><input type="checkbox" name="updates" id="updates" value="n" tabindex="5" /></td>
</tr>
</table>
</fieldset>
<input type=submit value="Send this enquiry" />
</form>