help with incorporating CSS within asp file

[richey1]

Hi

I'm new to css and I'm trying to write a tabel-less form which has sort of worked but the layout isn't right.

we have a seperate file for css files and for asp files.
below is part of the asp file and further below some of the styles from the css file I have been using. Problem is the labels aren't wide enough ? how can i make them wider following the principles I've used below. Also I need it to be as fully as accessible as possible.

any help appreciated
thanks
jack

b = b & "<form action=""mysite.asp?page=1344"" method=""post"" name=""formFOI"">"
b = b & "<div class=""form"">"
b = b & "<label for=""Name"">Name (*)</label><input type=""text"" name=""Name"" size=""30"" value=""" & TheName & """ /><br />"
b = b & "<label class=""label-rich"" for=""Organisation"">Organisation</label><input type=""text"" name=""organisation""
size=""30"" value=""" & organisation & """ /><br />"
................and so on ending with
b = b & "<div class=""form_group"">"
b = b & "<input type=""submit"" value=""Submit"" class=""submit-button"" /><input type=""reset"" value=""Clear Form"" />"
b = b & "</div>"
b = b & "</div>"
b = b & "</form>"


css file
---------
.form label, .form input, .form textarea, .form select, .form .form_text {
display:block;
float:left;
margin-bottom:10px;
}

.form .form_group select, .form .form_group .form_text, .form .form_group input {
margin-right:5px;
}

.form label {
text-align:left;
width:100px;
margin-right:75px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.form br {
clear:both;
}


.label-rich {
float: left;
width: 150px;
text-align: right;
}


.input-box
{
margin-bottom: 10px
}

.submit-button
{
margin-left: 0em;
clear: both
}

 

[richey1]

its ok - i've sorted it now

thanks anyway

 

[Vragabond]

Could you share the solution with us, so that others can learn from it.

 

[richey1]

sorry................................

not a lot really !
changed a couple of the css styles (.form label) and got rid of a couple

here is my final css styles and beneath that is my final html script (looks nice in IE 6.0 and Firefox 1.0.4 though and got a green tick in firefox!)

regards
jack

.form label, .form input, .form textarea, .form select, .form .form_text {
display:block;
float:left;
margin-bottom:5px;
}

.form_group {
margin-right:5px;
}

.form label {
text-align:left;
width:200px;
margin-right:55px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

.form br {
clear:both;
}

final html script
-----------------

b = b & "<form action=""mysite.asp?page=1344"" method=""post"" name=""formFOI"">"
b = b & "<div class=""form"">"
b = b & "<label for=""Name"">Name (*)</label><input type=""text"" name=""Name"" size=""30"" value=""" & TheName & """ /><br />"
b = b & "<label for=""Organisation"">Organisation</label><input type=""text"" name=""organisation"" size=""30"" value=""" & organisation & """ /><br />"
b = b & "<label for=""PostCode"">PostCode</label><input type=""text"" name=""PostCode"" size=30 maxlength=50 value=""" & PostCode & """ /><script type=""text/javascript"">postcode_anywhere_address();</script><br />"
b = b & "<label for=""Address1"">Address1</label><input type=""text"" name=""Address1"" size=30 maxlength=50 value=""" & Address1 & """ /><br />"
b = b & "<label for=""Address2"">Address2</label><input type=""text"" name=""Address2"" size=30 maxlength=50 value=""" & Address2 & """ /><br />"
b = b & "<label for=""Address3"">Address3</label><input type=""text"" name=""Address3"" size=30 maxlength=50 value=""" & Address3 & """ /><br />"
b = b & "<label for=""Town"">Town</label><input type=""text"" name=""Town"" size=30 maxlength=50 value=""" & Town & """ /><br />"
b = b & "<label for=""County"">County</label><input type=""text"" name=""County"" size=30 maxlength=50 value=""" & County & """ /><br />"
b = b & "<label for=""TelNo"">Tel No</label><input type=""text"" name=""TelNo"" size=30 maxlength=50 value=""" & TelNo & """ /><br />"
b = b & "<label for=""FaxNo"">Fax No</label><input type=""text"" name=""FaxNo"" size=30 maxlength=50 value=""" & FaxNo & """ /><br />"
b = b & "<label for=""email"">Email (*)</label><input type=""text"" name=""email"" size=30 maxlength=50 value=""" & email & """ /><br />"
b = b & "<label for=""Information"">Information (please be as specific as possible) (*)</label><Textarea rows=""6"" name=""information"" cols=42>" & information & "</textarea><br /><br />"
b = b & "<label for=""contact"">Please let me have the information by (*)</label> "
b = b & "<select size=""1"" name=""contact"">"
b = b & "<option selected value="""">Please Select......</option>"
b = b & "<option value=""Letter"""
if contact = "Letter" then
b = b & "selected >Letter</option>"
else
b = b & ">Letter</option>"
end if
b = b & "<option value=""Fax"""
if contact = "Fax" then
b = b & "selected >Fax</option>"
else
b = b & ">Fax</option>"
end if
b = b & "<option value=""Telephone"""
if contact = "Telephone" then
b = b & "selected >Telephone</option>"
else
b = b & ">Telephone</option>"
end if
b = b & "<option value=""Email"""
if contact = "Email" then
b = b & "selected >Email</option>"
else
b = b & ">Email</option>"
end if
b = b & "<option value=""I would like to come in the office"""
if contact = "I would like to come in the office" then
b = b & "selected >I would like to come in the office</option>"
else
b = b & ">I would like to come in the office</option>"
end if
b = b & "<option value=""other"""
if contact = "other" then
b = b & "selected >other</option>"
else
b = b & ">other</option>"
end if
b = b & "</select><br />"
b = b & "<label for=""othercontact"">If other selected from list please complete this field (*)</label><input type=""text"" name=""othercontact"" size=30 maxlength=50 value=""" & othercontact & """ /><br />"
b = b & "<input type=""hidden"" name=""date_received"" size=30 maxlength=20 value=""" & formatdatetime(now(),vblongdate) & """ /><br />"
b = b & "<div class=""form_group"">"
b = b & "<input type=""submit"" value=""Submit"" /><input type=""reset"" value=""Clear Form"" /><br />"
b = b & "</div>"
b = b & "</div>"
b = b & "</form>"