Aligning form labels and text-inputs

[Geoff Hague]

I've got a small little problem with my 'website-in-progress':

http://www.captainsoftheworld.com/modernrepublic/strict/index.php

http://www.captainsoftheworld.com/modernrepublic/strict/ModernRepublic.css

Is it possible, without messing around with per-pixel positioning or sizing,
to make the labels ("Name" & "E-mail") in the Mailing List form line up with
their associated text-input areas? In my system's setup (using IE6) the
labels sit just slightly above the text-input areas (or conversly, the
text-inputs sit slightly below their respective labels).

Any way to clean that up?

Thanks!
~Geoff

[jmm-list-gn]

Re: Aligning form labels and text-inputs

Geoff Hague wrote:[color=blue]
>
> Is it possible, without messing around with per-pixel positioning or sizing,
> to make the labels ("Name" & "E-mail") in the Mailing List form line up with
> their associated text-input areas? In my system's setup (using IE6) the
> labels sit just slightly above the text-input areas (or conversly, the
> text-inputs sit slightly below their respective labels).
>
> Any way to clean that up?
>[/color]
Use a table. It's tabular data. And throw in the other elements of the
mailing list as well.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Brian]

Re: Aligning form labels and text-inputs

Geoff Hague wrote:
[color=blue]
> I've got a small little problem with my 'website-in-progress':
>
> http://www.captainsoftheworld.com/mo...rict/index.php[/color]

Validate your html *before* asking for help.

http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

[color=blue]
> Is it possible, without messing around with per-pixel positioning or
> sizing, to make the labels ("Name" & "E-mail") in the Mailing List
> form line up with their associated text-input areas?[/color]

2 solutions.

(1) use a table, label in one column, input in the other

http://www.tsmchughs.com/contact/

(2) float the label left, define a width for it

http://www.julietremblay.com/contact/

BTW, please consider using the <label> element for your input labels.
And please lose the microfonts.

--
Brian (remove ".invalid" to email me)

http://www.tsmchughs.com/

[CG.]

Re: Aligning form labels and text-inputs

Hi Georg,
The border size in <label> is different of <input>.Due to improper
implementation of the box model in IE, there is a different rendering of
your elements.
If you use 1px solid #color for input, you should use it for the label
also. (i.e.: 1px solid none)

Better you name input{}and label{}in your css.
And test your layout in many browsers.

....you don't have to use tables :-))

hth,
Christian G.