...

View Full Version : Inputs overlapping labels



spyke01
09-20-2006, 03: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;
}

_Aerospace_Eng_
09-20-2006, 03:12 AM
In this part of your CSS you have a left margin set, because you have your labels floated your left margin needs to be equal to or greater than the width of your labels.

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;
}

spyke01
09-20-2006, 03:59 AM
thans mate



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum