Hey,
I have a contact form with the following code:
<form method="post" action="contact.html">
<fieldset>
<legend>Contact Me</legend>
<div>
<label for="name">Name:</label>
<input type="text" name="name" id="name" class="width" />
</div>
<div>
<label for="email">Your E-mail Address:</label>
<input type="text" name="email" id="email" class="width" />
</div>
<div>
<label for="contactreason">Reason For Contact:</label>
<select name="contactreason" id="contactreason" class="width">
<option value="idea">I have an Idea</option>
<option value="idea">Problem With The Site</option>
<option value="idea">Just Saying Hi</option>
<option value="idea">Other</option>
</select>
</div>
<div>
<label for="message">Message:</label>
<textarea name="message" id="message" rows="10" cols="50"></textarea>
</div>
<div id="submit">
<input type="submit" value="Send Message" />
</div>
</fieldset>
</form>
and I have applied the following CSS to it:
legend {
font-weight: bold;
}
fieldset {
border: 2px dashed black;
padding: 20px;
}
form div {
margin-bottom: 5px;
}
label {
display: block;
float: left;
width: 200px;
font-weight: bold;
}
.width {
width: 300px;
}
#submit {
text-align: center;
}
#submit input {
color: white;
background-color: blue;
padding: 5px;
font-weight: bold;
border: 1px solid black;
}
Now if you take a look at that in Chrome, Firefox, Opera or Safari it looks fine and the legend is where it should be which is in the top left corner on top of the border however take a look in IE8 and it appears squashed into the fieldset. Any ideas?