input text boxes not vetically aligning 1

[richey1]

Hi

I've been playing around with my online form using css. I found a site

http://www.accessify.com/tools-and-wizards/accessible-form-builder.asp?type=css

which gave me back this css (string because it is 3rd party cms) and below that the html. in their preview window it looks great, but if i put it through IE 6.0 the text boxes don't align vertically ? (works great apart from that !)

any ideas appreciated
kim

css
---
h = "<style type=""text/css"">"
h = h & "label,span.spacer {width:140px;}"
h = h & "label{"
h = h & "font-weight:normal;"
h = h & "color : #000000;"
h = h & "font-weight : normal;"
h = h & "cursor:hand;"
h = h & "}"
h = h & "fieldset{"
h = h & "padding:10px;"
h = h & "border : 1px solid #000066;"
h = h & "margin-bottom : 15px;"
h = h & "padding : 10px;"
h = h & "}"
h = h & "legend {"
h = h & "font-weight : normal;"
h = h & "}"
h = h & "</style>"


html
----
b = b & "<FORM action=""main.asp?page=618"" METHOD=""post"" name=""formRegistration"">"
b = b & "<fieldset>"
b = b & "<legend class=legend>Contact Information :</legend>"
b = b & " <div>"
b = b & " <span><label for=""Businessname"">Business Name:</label></span>"
b = b & " <span><input type=""text"" name=""Businessname"" title=""Text input: BusinessName"" tabindex=""1"" value=""" &

BusinessName & """ id=""Businessname"" size=""20"" /></span>"
b = b & " </div>"
b = b & " <div>"
b = b & " <span><label for=""Contacttitle"">Contact Title:</label></span>"
b = b & " <span><input type=""text"" name=""Contacttitle"" title=""Text input: ContactTitle"" id=""Contacttitle""

tabindex=""2"" value=""" & ContactTitle & """ size=""20"" /></span>"
b = b & " </div>"
b = b & " <div>"
b = b & " <span class=""spacer""> </span>"
b = b & " <span><input type=""submit"" value=""Submit this form"" /></span>"
b = b & " </div>"
b = b & "</fieldset>"
b = b & "</form>

 

[Vragabond]

1. Label and span are by default inline elements and do not take width. They will simply ignore it.
2. There is no value 'hand' for cursor. That is proprietary MS value. Use corsor: pointer; instead.

Other than that, I cannot see anything in your code that would align the elements.

 

[richey1]

thanks for that.......
I have changed to pointer now
how can i go about aligning the text boxes vertically ?
is it a complete re-write or can i tweak what i've got ?
i'm presuming my html is ok ?

thanks

 

[Vragabond]

HTML looks ok, although I would get rid of the spans which don't seem to be needed. To vertically align the you would need either to put them in a table (how we used to do it) or float them. From the code you have, floating wouldn't be so difficult -- just add floating to both labels and inputs (floated elements are block elements and your width will be taken into account) and have divs as clearing (clear: both.

 

[richey1]

thanks

i've removed the spans and added in

h = h & "float : left;" which has done the trick. plus added for div so my css is now

h = "<style type=""text/css"">"
h = h & "label,span.spacer {width:140px;}"
h = h & "label{"
h = h & "font-weight:normal;"
h = h & "color : #000000;"
h = h & "float : left;"
h = h & "font-weight : normal;"
h = h & "display:inline;"
h = h & "cursorointer;"
h = h & "}"
h = h & "fieldset{"
h = h & "padding:10px;"
h = h & "border : 1px solid #000066;"
h = h & "margin-bottom : 15px;"
h = h & "padding : 10px;"
h = h & "}"
h = h & "legend {"
h = h & "font-weight : normal;"
h = h & "}"
h = h & "div {"
h = h & "clear: both;"
h = h & "}"
h = h & "</style>"

is that ok ?
also you say add floating to the input element ? where do i do this ? add an input within css ? or within the html ?

thanks for all your help

 

[Vragabond]

Well, if you say that that has done it for you, then I suppose you don't need to float inputs. If you wanted to do it, you could add:

input {
  float: left;
}