...

View Full Version : How to line up Form with CSS correctly.



DimFish
02-09-2005, 05:19 PM
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.

mcdougals4all
02-09-2005, 05:47 PM
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/

Graft-Creative
02-09-2005, 05:49 PM
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

DimFish
02-09-2005, 06:34 PM
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;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum