How to line up Form with CSS correctly.

Would you know why this looks all screwy in Win/IE6 (and probably others)?:

http://www.jamesmawdsley.com/haveyoursay.html
http://www.jamesmawdsley.com/layout1.css

(Looks fine in Mac Safari.)

Here's CSS:

div.row {
clear: right;
padding-top: 5px;
}

div.row span.label {
float: left;
width: 70px;
text-align: right;
}

div.row span.formw {
float: right;
width: 400px;
text-align: left;
}

It all appears too far to the right, but if I reduce the 400px width, it comes in left abit, but in safari it moves rightwards...what's with that?

What's the best way to get it all lined up nicely?
(I got the code from the ALA tips:http://www.alistapart.com/articles/practicalcss/)

Thanks everyone

Andrew.

Try this out. It should align the text inputs, although you'll still need to tweak where the buttons are appearing.


div.row
{
clear: right;
padding-top: 5px;
}

div.row span.label
{
float: left;
width: 70px;
text-align: right;
padding-right:1em;
}

div.row span.formw
{
...deleted everything here...
}


Also, where you are using <span class="label"> you'd benefit from using the actual <label> element: http://www.htmldog.com/guides/htmladvanced/forms/

Sorry Andrew, ignore what I just sain in my email :p

Get rid of the ALA stuf, and just put this in your css, then you'll be halfway there ;)


input {
margin-left: 100px;
display: block;
}
textarea {
margin-left: 100px;
display: block;
}



Gary

Nice one chaps.

This works:

div.row
{
clear: right;
padding-top: 5px;
}

div.row span.label
{
float: left;
width: 80px;
text-align: right;
padding-right: 1em;
}