How to line up forms 1

[1DMF]

How do I line up forms, I've hit a brick wall, display:inline-block; only works for IE to enable a width setting for labels, the JS solution on

http://www.alistapart.com/articles/prettyaccessibleforms

doesn't work, placing -moz-inline-box makes some of the label text vanish and on top of all this neither display:inline-block or display:-moz-inline-box validates as CSS on W3C.

So what do I do now?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[BillyRayPreachersSon]

I'd go with floats, personally... while it's not the most perfect cut-down example in the world, check out:

http://www.coedit.co.uk/contact/

for an example.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[cLFlaVA]

dan, i've seen your site a few times, but never told you that i like your color scheme and design a lot. something about it just emits feelings of comfort, which is a quality of a design i strive for.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[1DMF]

I had to ditch my floating fieldsets as clear:left; , was making the third float break out of its containing div.

It just doesn't seem possible to easily make field sets float side by side and line everything up in mozilla.

I gave up, widened the the fieldsets, used IE hacks and mozilla min-widths to give fluid widths to the labels and allowed them to stack, although not the design i wanted at least it looks the same now in IE and mozilla, well apart from that damn pesky collapsing margin problem on the 'about us' page, but to be honest the tiny little bit it doesn't pad correctly in mozilla just aint worth the hastle, once again i find myself loving IE, funny really concidering the flack everyone gives it for it's appauling CSS support, gotta love the irony



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

I just have one question... In a certain article I posted about the collapsing margins there is also an array of workarounds to make margins not collapse anymore. Is it that none of those workarounds work for you or are you just morally against them?

 

[BillyRayPreachersSon]

I believe that if you set position:relative on the container which houses your floated elements, then the clear will not affect other elements outside of that.

That's my understanding, although it could well be wrong.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

I've just found this site while looking round:

http://www.designmeltdown.com/chapters/Forms/part2.aspx

It's got some really nice examples of form layouts on - definately worth a look.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

Thanks Dan, great help

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.