css form element placing, no tables

[dave]

Hello,
I've got a site project that i've got to design a layout without
resorting to tables. I want to use a table for tabular data not any
formatting layout, primarily emphasis needs to be on using css to place form
elements. My method thus far has been to use a table, for several reasons i
don't want to resort to this, i'd rather place the elements with css and get
a standards compliant site. I am uncertain as to how to accomplish this.
Thanks.
Dave.

[Stephen Poley]

On Thu, 16 Sep 2004 02:34:52 GMT, "dave" <dm*******@woh. rr.com> wrote:

I've got a site project that i've got to design a layout without
resorting to tables. I want to use a table for tabular data not any
formatting layout, primarily emphasis needs to be on using css to place form
elements. My method thus far has been to use a table, for several reasons i
don't want to resort to this, i'd rather place the elements with css and get
a standards compliant site. I am uncertain as to how to accomplish this.

A much discussed issue. My preference, and that of about half the
regulars here, is to consider that each form element and its
corresponding label are in fact tabular data: the association between
label and element is meaningful, not merely cosmetic.

A representative of the other half will be along shortly to tell you how
you can do it without tables anyway. ;-)

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Neal]

On Thu, 16 Sep 2004 07:56:15 +0200, Stephen Poley
<sb************ ******@xs4all.n l> wrote:

A representative of the other half will be along shortly to tell you how
you can do it without tables anyway. ;-)

Nah, I won't complain if you do ;)

[Garmt de Vries]

Stephen Poley <sb************ ******@xs4all.n l> wrote in message news:<4f******* *************** **********@4ax. com>...

A representative of the other half will be along shortly to tell you how
you can do it without tables anyway. ;-)

I do hope so! I was about to ask the same question when this thread
was started. I know the issue has been discussed before, but the only
real solution I could find was to use a table.

If you just take the minimum amount of markup:

<form>
<label for="foo">Your foo:</label><input id="foo" name="foo" ... >
<label for="bar">Your bar:</label><input id="foo" name="foo" ... >
</form>

you could set display:block for the labels, give them a fixed width
(in em of course) and position them either with float:left or with
position: absolute in combination with an appropriate margin for the
rest of the form.

The problem is: Mozilla and Netscape 7 (and possibly other browsers)
don't understand this and don't display the labels at all :( You'll
have to hide these rules from them (how?) or resort to using a table.

<academic>
I think it's not unreasonable to consider label/input pairs to be a
table, but it would be nicer and simpler if you didn't have to use
that roundabout way. To put the question the other way: what does
marking this up as a table actually add in terms of semantics/logic?\
</academic>

Garmt de Vries.

[Neal]

On 16 Sep 2004 05:54:49 -0700, Garmt de Vries <gd*****@hotmai l.com> wrote:

Stephen Poley <sb************ ******@xs4all.n l> wrote in message
news:<4f******* *************** **********@4ax. com>...

A representative of the other half will be along shortly to tell you how
you can do it without tables anyway. ;-)

I do hope so! I was about to ask the same question when this thread
was started. I know the issue has been discussed before, but the only
real solution I could find was to use a table.

If you just take the minimum amount of markup:

<form>
<label for="foo">Your foo:</label><input id="foo" name="foo" ... >
<label for="bar">Your bar:</label><input id="foo" name="foo" ... >
</form>

you could set display:block for the labels, give them a fixed width
(in em of course) and position them either with float:left or with
position: absolute in combination with an appropriate margin for the
rest of the form.

The problem is: Mozilla and Netscape 7 (and possibly other browsers)
don't understand this and don't display the labels at all :( You'll
have to hide these rules from them (how?) or resort to using a table.

This works in Moz.

form div {position: relative; font-size: 100%; line-height: 1.5;}
form div label {display: block; width: 10em; text-align: right;}
form div input {font-size: 100%; position: absolute; top: 0; left: 13em;}
<form>
<div><label for="realname"> Your Name (required):</label><input type="text"
name="realname" id="realname"> </div>
<div><label for="email">Ema il Address (required):</label><input
type="text" name="email" id="email"></div>
</form>

[Phil Evans]

Neal wrote:

This works in Moz.

form div {position: relative; font-size: 100%; line-height: 1.5;}
form div label {display: block; width: 10em; text-align: right;}
form div input {font-size: 100%; position: absolute; top: 0; left: 13em;}
<form>
<div><label for="realname"> Your Name (required):</label><input
type="text" name="realname" id="realname"> </div>
<div><label for="email">Ema il Address (required):</label><input
type="text" name="email" id="email"></div>
</form>

I really like this technique - seems much safer than relying on floats.

One thing occurs - I haven't had a chance to test in anything but
Firefox, but it seems to work there:

form label { display: block; position: relative; }
form label input { position: absolute; left: 24em; }

<form action="">
<label>
Text Input 1
<input type="text" />
</label>
<label>
Text Input with long title
<input type="text" />
</label>
<label>
Text Input 3
<input type="text" />
</label>
</form>

Cuts down on extraneous markup somewhat. Depending on your layout,
setting right: 0 on the inputs might work well too . . .

Just idle conjecturing :)

P

[dave]

Hello Stephen,
Thanks for your reply. Can you give an example of what your concept is?
Thanks.
Dave.

[Nairb]

Phil Evans <ne********@phi lHADDOCKevans.r emovethefish.co m> wrote in message news:<10******* ********@smtp-1.griffin.com>. ..

Neal wrote:

This works in Moz.

form div {position: relative; font-size: 100%; line-height: 1.5;}
form div label {display: block; width: 10em; text-align: right;}
form div input {font-size: 100%; position: absolute; top: 0; left: 13em;}
<form>
<div><label for="realname"> Your Name (required):</label><input
type="text" name="realname" id="realname"> </div>
<div><label for="email">Ema il Address (required):</label><input
type="text" name="email" id="email"></div>
</form>

Oddly enough..
In IE 6 these text field seem to disappear when I reduce my browser
window size. But not to worry they reappear when it is maximized.

huh?

[Neal]

On 17 Sep 2004 17:14:19 -0700, Nairb <bg***@yahoo.co m> wrote:

Oddly enough..
In IE 6 these text field seem to disappear when I reduce my browser
window size. But not to worry they reappear when it is maximized.

huh?

Possibly, resizing the browser after the page has been rendered confuses
IE6.

[Stephen Poley]

On Fri, 17 Sep 2004 17:51:49 GMT, "dave" <dm*******@woh. rr.com> wrote:

Thanks for your reply. Can you give an example of what your concept is?

Well *an* example is
http://www.xs4all.nl/~sbpoley/webmatters/contact.html

Though it wasn't actually composed as an example of how to lay out
forms, and I have to admit that a couple of aspects are a bit debatable.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/