Click to See Complete Forum and Search --> : label and form input


kproc
06-06-2006, 10:20 PM
Hi Below is the code for my form and the css to format it, the problem I'm having is that the input fields are pushed down one row

any ideas




form code


<label for="Street_address">
<input id="Street_address" name="Street_address" type="text" /></label> <br />

<label for="post_office_box">
Other Address Info:
<input id="post_office_box" name="post_office_box" type="text" />
</label><br />

<label for="city">
City:
<input id="city" name="city" type="text" />
</label><br />

<label for="province">
Province:
<input id="province" name="province" type="text" />
</label><br />

<label for="postal">
Postal Code:
<input id="postal" name="postal" type="text" />
</label><br />



CSS

#register fieldset{
display: block;
margin: 0 auto 1em auto;
padding: 0em 1em 1em 1em;
border:3px groove #EEFAEA;
width: 300px;
}

#register input{
width: 125px;
float:right;

}

#register select{
width: 125px;
float:right;

}
#register input.submit{

float:left;

}


webpage link http://www.tomorrownextweek.com/familypages/form_RegisterPage.php

BassMasterFlash
06-07-2006, 08:11 PM
Not sure what all you have going on, but I would take the float out of the input, and select tags, and add an align attribute to your register element.


// start css

#register fieldset{
display: block;
margin: 0 auto 1em auto;
padding: 0em 1em 1em 1em;
border:3px groove #EEFAEA;
width: 300px;
}

#register input{
width: 125px;
}

#register select{
width: 125px;

}
#register input.submit{
float:left;

}
// End CSS
// Start HTML

<div id="register" align="right">
<label for="Street_address">Street Address:<input id="Street_address" name="Street_address" type="text" /></label> <br />

<label for="post_office_box">
Other Address Info:
<input id="post_office_box" name="post_office_box" type="text" />
</label><br />

<label for="city">
City:
<input id="city" name="city" type="text" />
</label><br />

<label for="province">
Province:
<input id="province" name="province" type="text" />
</label><br />

<label for="postal">
Postal Code:
<input id="postal" name="postal" type="text" />
</label><br />
</div>

kproc
06-07-2006, 08:38 PM
thank you for the replay, I'm trying to get the label to line up with the input box. currently the input boxes are pushed down one row lower then the label

ie

label name
TEXT BOX

I'm not shure what you mean by align

BassMasterFlash
06-07-2006, 08:47 PM
where you have: <div id="center">
try turning it to: <div id="center" align="right"> in your html.

And delete 'float:right' from your 'input' and 'select' selectors.

see if that's more of what you are going for.

kproc
06-07-2006, 09:30 PM
Thank you for the help I desided to use a table