spyke01
09-19-2006, 10:44 PM
On http://www.fasttracksites.com/demos/blog/index.php?p=viewentry&id=1#comments
The fieldset at the bottom does not display correctly in FF, it stays short and goes to the bottom of the form. If you look at the page in IE it is displayed as it should be.
The HTML
<form action="" method="post" class="commentsform">
<fieldset>
<legend>Add a Comment</legend>
<label for="name">Name <em>*</em></label> <input id="name" /><br />
<label for="emailaddress">Email Address <em>*</em></label> <input id="emailaddress" /><br />
<label for="website">Website</label> <input id="website" /><br />
<label for="comments">Comments</label> <textarea id="comments"></textarea><br />
<br /><br /><input type="submit" class="button" value="Add Comment!" />
</fieldset>
</form>
The CSS
form.commentsform fieldset {
padding: 5px;
float: left;
width: 100%;
}
form.commentsform fieldset legend {
float: left;
font-weight: bold;
}
form.commentsform label {
float: left;
width: 120px;
font-weight: bold;
}
form.commentsform.input, form.commentsform.textarea{
width: 180px;
margin-bottom: 5px;
}
form.commentsform textarea {
width: 250px;
height: 150px;
}
form.commentsform ol, form.commentsform ol li {
list-style: none;
}
form.commentsform br {
clear: left;
}
The fieldset at the bottom does not display correctly in FF, it stays short and goes to the bottom of the form. If you look at the page in IE it is displayed as it should be.
The HTML
<form action="" method="post" class="commentsform">
<fieldset>
<legend>Add a Comment</legend>
<label for="name">Name <em>*</em></label> <input id="name" /><br />
<label for="emailaddress">Email Address <em>*</em></label> <input id="emailaddress" /><br />
<label for="website">Website</label> <input id="website" /><br />
<label for="comments">Comments</label> <textarea id="comments"></textarea><br />
<br /><br /><input type="submit" class="button" value="Add Comment!" />
</fieldset>
</form>
The CSS
form.commentsform fieldset {
padding: 5px;
float: left;
width: 100%;
}
form.commentsform fieldset legend {
float: left;
font-weight: bold;
}
form.commentsform label {
float: left;
width: 120px;
font-weight: bold;
}
form.commentsform.input, form.commentsform.textarea{
width: 180px;
margin-bottom: 5px;
}
form.commentsform textarea {
width: 250px;
height: 150px;
}
form.commentsform ol, form.commentsform ol li {
list-style: none;
}
form.commentsform br {
clear: left;
}