[thelist] Form, Style and Internet Exploder

[Richard Harb]

Hi all,

I'm writing an application which I want to style in a 2 column layout.
No news there.

Focussing on forms I tried to come up with markup as clean as possible.

After some digging I tried various solutions:
1) using a table, just for the sake of it
2) using a paragraph and float the label
3) and some hackish 3rd variant overlaying paragraphs with different margins

I built a demo with - sort of - minimum markup to demonstrate:
http://harb.isa-geek.net/playground/forms/form-float

The problems:
ad 1)
If all else fails I can still do that. I'd like to try a more 'modern', for lack
of a better word, approach first.


ad 2)
I'd prefer this one because of the very clean markup but have one major issue I
can't get rid of:

The textbox is 'using' its own paragraph to allow for larger widths.
Additionally the style of the textbox is modified to be a block level element to
allow centering the element. And to keep it from fusing with its label I added
the clear: both. (Clear: left would do the job as well...)

* The problem is that it will slide under the end of the left navigation this way.

This raises a general question: if for some reason you need to apply 'clear'
anywhere in the content, can it be prevented that the whole page slides down to
under a navigation block?

----
* Internet Explorer (v6, SP...) swallows the additional text next to the
Checkboxes for some reason I can't figure out.
http://harb.isa-geek.net/playground/forms/form-float-layout-ie.png


ad 3)
I tried that approach because of the problems I had with using clear in the
second version. However it needs a lot of classes so it's not too different from
using a table in the first place.

Looks as expected in serious browsers, but my IE seriously messes with the
presentation. Would anyone happen to know why?
http://harb.isa-geek.net/playground/forms/form-class-layout-ie.png


Final words: this is a demo. As such it is not optimized at all towards working
in older browsers, no @imports, no failsafes or tweaks - yet.
And it's mainly intended for use in the backend where the browsers used are well
known.

Thanks for you time.


Richard