Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Inputs overlapping labels

    on http://fasttracksites.com/demos/blog...&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:
    Code:
    					<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:
    Code:
    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;
    }

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    Code:
    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;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thans mate


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •