CSS Forms

[Der Kommissar]

Hi all

I'm having a problem with a form layout in CSS, based on Eric Meyer's
technique (as found on ALA). FireFox and IE show this page correctly,
but Opera as well as Safari show way too much white space at the top
of the form. I have been trying for a few hours to get this right, but
no luck so far. Can anyone give me a hint on how to solve this issue?

URL: http://www.statik.be/misc/reli/

Thanks in advance!

DK

[Martin Honnen]

Der Kommissar wrote:

I'm having a problem with a form layout in CSS, based on Eric Meyer's
technique (as found on ALA). FireFox and IE show this page correctly,
but Opera as well as Safari show way too much white space at the top
of the form. I have been trying for a few hours to get this right, but
no luck so far. Can anyone give me a hint on how to solve this issue?

URL: http://www.statik.be/misc/reli/

It is that ul in the left-navigation div that is floated too and somehow
with Opera the floated form controls end up below the floated ul,
possibly due to the clear: both.

If you change the rule to

div.form-row
{
clear: right;
padding-top: 2px;
}

then I think both Opera and Mozilla render it the way you want. I don't
have Safari to test, maybe you can report back to the group whether it
works that way with Safari too.
--

Martin Honnen
http://JavaScript.FAQTs.com/

[Der Kommissar]

Martin Honnen wrote:

Der Kommissar wrote:

I'm having a problem with a form layout in CSS
<snip>
URL: http://www.statik.be/misc/reli/

It is that ul in the left-navigation div that is floated too and somehow
with Opera the floated form controls end up below the floated ul,
possibly due to the clear: both.

If you change the rule to

div.form-row
{
clear: right;
padding-top: 2px;
}

then I think both Opera and Mozilla render it the way you want. I don't
have Safari to test, maybe you can report back to the group whether it
works that way with Safari too.

Thanks, that did the trick in Opera! Unfortunately, the layout in Safari
is still messed up, it shows a LOT of white space, much more than the
length of the menu UL at the left. I have been playing with the CSS some
more, but to no avail. Can anyone with Safari and some CSS skills help
me out here? I updated the CSS file at the address to reflect the
changes I made. The address still is http://www.statik.be/misc/reli/ .

Thanks again for the help, Martin!

DK

[kchayka]

Der Kommissar wrote:

Martin Honnen wrote:

Der Kommissar wrote:

I'm having a problem with a form layout in CSS
URL: http://www.statik.be/misc/reli/
If you change the rule to
div.form-row { clear: right; }

then I think both Opera and Mozilla render it the way you want.

At enlarged text sizes, clear:right doesn't always clear the label for
the previous row, especially when a label wraps to 2 lines. It looks
messy, not to mention confusing. Forms are (arguably) tabular data, so a
table may be the better solution in this case.
layout in Safari is still messed up, it shows a LOT of white space

I have Safari 1.0 v85 handy and see what you mean. The margin (top)
property on h2 seems to be the trigger, though the actual cause could be
the floats, clears, the -10000px absolutely positioned elements, or some
combination thereof. Who knows?

h1, h2, h3, h4, h5, h6 {... margin: 0 0 5px 0; ...}

Changing the margin-top from 0 to 1px, specifically on h2, returns
spacing to normal, at least in this particular case. Using table markup
also seems to do the trick. I don't know what other Safari versions will
do, though.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Marco Bakker]

Der Kommissar <de***********@invalid.invalid> wrote:

Unfortunately, the layout in Safari
is still messed up, it shows a LOT of white space, much more than the
length of the menu UL at the left. I have been playing with the CSS some
more, but to no avail. Can anyone with Safari and some CSS skills help
me out here? I updated the CSS file at the address to reflect the
changes I made. The address still is http://www.statik.be/misc/reli/ .

get rid of that apology in the #header.

--
marco

[Der Kommissar]

kchayka wrote:

Der Kommissar wrote:

Martin Honnen wrote:

Der Kommissar wrote:
I'm having a problem with a form layout in CSS
URL: http://www.statik.be/misc/reli/

If you change the rule to
div.form-row { clear: right; }

then I think both Opera and Mozilla render it the way you want.

At enlarged text sizes, clear:right doesn't always clear the label for
the previous row, especially when a label wraps to 2 lines. It looks
messy, not to mention confusing. Forms are (arguably) tabular data, so a
table may be the better solution in this case.

layout in Safari is still messed up, it shows a LOT of white space

I have Safari 1.0 v85 handy and see what you mean. The margin (top)
property on h2 seems to be the trigger, though the actual cause could be
the floats, clears, the -10000px absolutely positioned elements, or some
combination thereof. Who knows?

h1, h2, h3, h4, h5, h6 {... margin: 0 0 5px 0; ...}

Changing the margin-top from 0 to 1px, specifically on h2, returns
spacing to normal, at least in this particular case. Using table markup
also seems to do the trick. I don't know what other Safari versions will
do, though.

That did the trick, thanks a lot! The cause is not the -10000px, as was
my first idea, because removing it unfortunately didn't help. I'll solve
it by using your suggestion for the time being, until a similar problem
comes up. Thanks again!

[Der Kommissar]

Marco Bakker wrote:

Der Kommissar <de***********@invalid.invalid> wrote:

Unfortunately, the layout in Safari
is still messed up, it shows a LOT of white space, much more than the
length of the menu UL at the left. I have been playing with the CSS some
more, but to no avail. Can anyone with Safari and some CSS skills help
me out here? I updated the CSS file at the address to reflect the
changes I made. The address still is http://www.statik.be/misc/reli/ .

get rid of that apology in the #header.

That doesn't solve the problem, but kchayka's solution did, so all is
fine. Thanks anyway.

[Marco Bakker]

Der Kommissar <de***********@invalid.invalid> wrote:

Marco Bakker wrote:

Der Kommissar <de***********@invalid.invalid> wrote:

Unfortunately, the layout in Safari
is still messed up, it shows a LOT of white space, much more than the
length of the menu UL at the left. I have been playing with the CSS some
more, but to no avail. Can anyone with Safari and some CSS skills help
me out here? I updated the CSS file at the address to reflect the
changes I made. The address still is http://www.statik.be/misc/reli/ .

get rid of that apology in the #header.

That doesn't solve the problem, but kchayka's solution did, so all is
fine. Thanks anyway.

I see. This morning I checked and it wasn't solved. Now it is :-)

--
marco

[kchayka]

Der Kommissar wrote:

kchayka wrote:

Der Kommissar wrote:

Martin Honnen wrote:
Der Kommissar wrote:

>URL: http://www.statik.be/misc/reli/

div.form-row { clear: right; }

At enlarged text sizes, clear:right doesn't always clear the label for
the previous row, especially when a label wraps to 2 lines. It looks
messy, not to mention confusing.

You might have addressed the Safari spacing issue, but this problem
remains. At enlarged text sizes, usability is rather impaired, methinks.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.