http://www.changemyworkout.com/index2.php?p=contactus

 

hey guys.

 

i can't seem to get my inputs to line up with my labels.

 

.contactform label {

float:left;

text-align:left;

width:75px;

height:25px;

}

 

.formfield {

border:2px solid #013E6A;

background-color:#FFFFFF;

height:20px;

width:220px;

font-size:15px;

float:right;

}

 

.commentsbox {

margin-top:15px;

width:220px;

height:250px;

border:2px solid #013E6A;

float:right;}

 

.contactform input{

border:2px solid #013E6A;

}

 

 

im so close to getting this done but i cant seem to figure it out. thanks in advance everyone.

Try adding display:block; within your .contactform label section.

 

(You might have to remove the float:left; and text-align:left; ?? Not sure on that tho.)

 

Hope that works for ya.

First of all, you have two stylesheets and one is named stylesie.css which I assume is only for IE. If so it needs to be in a conditional comment so that it doesn't apply to other browsers; delete from where it is and put this below the other stylesff.css stlylesheet link:-

<!--[if IE]>

<link rel="stylesheet" type="text/css" href="stylesie.css" />

<![endif]-->

 

The main problem is that you have exceeded the width available; I tested in Firefox first.

.contactform is width: 400px;

label is 100px; input has no defined width but seems to have given itself about 142px and has a defined margin-left: 160px and 2px side borders, all totalling 406px; so the input box goes down to the line below.

I edited the stylesff.css stylesheet like this:-

 

.contactform{ background-color: skyblue;

height:400px;

width:400px;

margin-left:60px;

margin-top:10px;

}

 

.contactform input{ background-color: lime;

border:2px solid #18537F;

margin-left:150px; /*was 160px;*/ margin-top: 10px;

float:right; width: 140px;

}

 

.contactform label{ background-color: pink; clear: both;

color:#FFF;

font-size:12px;

float:left;

margin-top:11px;/*10px;*/

width:100px;

text-align:right;

}

 

.contactform textarea{ background-color: green;

color:#FFF;

font-size:12px;

float:right;

margin-top:11px;

width:140px; height: 150px;

}

 

adding temporary background colors so that you can see what is where and adding clear: both; to the label so that it starts a new line and adding a style for the textarea and adding widths to input and textarea styles.

 

In fact, it is OK for IE7 so you don't need the other stylesheet for IE7 unless you have other reasons for it. If you do use it, you only need show the styles that are different, not a complete stylesheet. If you want different styles for IE6 change the conditional comment to if IE 6 (space between IE and 6).

 

Note: I used your online stylesheets which didn't have these; so try first without them using my styles:-

.formfield {

border:2px solid #013E6A;

background-color:#FFFFFF;

height:20px;

width:220px;

font-size:15px;

float:right;

}

 

.commentsbox {

margin-top:15px;

width:220px;

height:250px;

border:2px solid #013E6A;

float:right;}

 

.contactform input{

border:2px solid #013E6A;

}

perfect. thanks alot.