spyke01
09-20-2006, 02:00 AM
on http://fasttracksites.com/demos/blog/index.php?p=viewentry&id=1#comments in IE things look fine, but once i load it in FF the inputs and textarea overlap onto the labels at the left.
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;
}
form.commentsform input, form.commentsform textarea {
background: url("images/input_bg.gif");
border:1px #ccc solid;
display:block;
padding:4px;
margin:0 0 10px 23px;
}
form.commentsform input:hover, form.commentsform textarea:hover {
border:1px #97c660 solid;
}
form.commentsform input:focus, form.commentsform textarea:focus {
border:1px #3a535e solid;
}
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;
}
form.commentsform input, form.commentsform textarea {
background: url("images/input_bg.gif");
border:1px #ccc solid;
display:block;
padding:4px;
margin:0 0 10px 23px;
}
form.commentsform input:hover, form.commentsform textarea:hover {
border:1px #97c660 solid;
}
form.commentsform input:focus, form.commentsform textarea:focus {
border:1px #3a535e solid;
}