Firefox ignores CSS "width" property?

[Mario T. Lanza]

I'm not sure what I'm doing wrong.

I have a form that has mnay input fields.
Before each input field is a label enclosed in custom LABEL tags.
Inside my CSS I have:

LABEL
{
width: 120px;
}

In Internet Explorer this is recognized and each input floats in a
nicely aligned column with all other inputs. In Firefox the LABEL
will not maintain the width. It collapses to the exact size of the
inner text. I have changed other properties inside the LABEL
definition and they are applied.

What's the deal!? All my forms in Firefox are messy, while in IE they
appear nice and neat, all inputs lined up.

Mario T. Lanza
Clarity Information Architecture, Inc.
2004.07.04

[Els]

Mario T. Lanza wrote:

I'm not sure what I'm doing wrong.

I have a form that has mnay input fields.
Before each input field is a label enclosed in custom LABEL
tags. Inside my CSS I have:

LABEL
{
width: 120px;
}

In Internet Explorer this is recognized and each input
floats in a nicely aligned column with all other inputs.
In Firefox the LABEL will not maintain the width. It
collapses to the exact size of the inner text. I have
changed other properties inside the LABEL definition and
they are applied.

What's the deal!?

http://www.w3.org/TR/html4/interact/...tml#edef-LABEL

Label is an inline element, whereas only block level elements
can be given a width. The fact that IE is obeying the value
you gave to the width property, is probably due to lack of a
dtd or doctype altogether. This puts IE into quirks mode, not
standards mode.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Spartanicus]

ml****@lycos.com (Mario T. Lanza) wrote:

I'm not sure what I'm doing wrong.

I have a form that has mnay input fields.
Before each input field is a label enclosed in custom LABEL tags.
Inside my CSS I have:

LABEL
{
width: 120px;
}

In Internet Explorer this is recognized and each input floats in a
nicely aligned column with all other inputs. In Firefox the LABEL
will not maintain the width. It collapses to the exact size of the
inner text. I have changed other properties inside the LABEL
definition and they are applied.

What's the deal!? All my forms in Firefox are messy, while in IE they
appear nice and neat, all inputs lined up.

Label is inline by default, thus a standard compliant UA does not honor
a specified width, set display:block to get it to stick.

--
Spartanicus

[Mario T. Lanza]

Thanks for the prompt replies!

Perhaps, rather than explaining my problem, I should have explained my
intent. I want to create forms that have neatly aligned labels and
inputs. I attempted the "display: block" and this results in the
labels and the inputs displaying on separate lines.

I want the labels to display on the same lines as their input fields.
I want the labels to always be 120px wide so that the inputs will
neatly follow and all share a common left aligment. I want to use as
little markup as possible (thus tables are out).

Suggestions?

Mario

[Els]

Mario T. Lanza wrote:

Thanks for the prompt replies!

Perhaps, rather than explaining my problem, I should have
explained my intent. I want to create forms that have
neatly aligned labels and inputs. I attempted the
"display: block" and this results in the labels and the
inputs displaying on separate lines.

I want the labels to display on the same lines as their
input fields. I want the labels to always be 120px wide so
that the inputs will neatly follow and all share a common
left aligment. I want to use as little markup as possible
(thus tables are out).

Suggestions?

Yep. Use a table. It is possible without a table, although I
don't know the link to the example. But it boils down to more
code than an ordinary table.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[jmm-list-tr]

Mario T. Lanza wrote:

I want the labels to display on the same lines as their input fields.
I want the labels to always be 120px wide so that the inputs will
neatly follow and all share a common left aligment. I want to use as
little markup as possible (thus tables are out).

Suggestions?

Use a table.

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

[Brian]

Mario T. Lanza wrote:

Thanks for the prompt replies!
To what? Why didn't you quote a few lines from the previous message so
I know what you're talking about.
I want to create forms that have neatly aligned labels and inputs.
I attempted the "display: block" and this results in the labels and
the inputs displaying on separate lines.
Float the label left. For a working demo, see

http://www.julietremblay.com/contact/
I want the labels to always be 120px wide
That's not such a great idea. Suppose the user has selected a large
font size?
so that the inputs will neatly follow and all share a common left
aligment.
Size the label element in em units, and you can still get the inputs
to line up as you want.
I want to use as little markup as possible (thus tables are out).

You should always use as little markup as possible, but not at the
cost of degrading the document. If <table> (or <p> or <code> or...) is
appropriate, use it.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Mario T. Lanza]

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

This was the example I needed.

I've been using CSS for over a year. I kinda taught myself in a very
unprofessional way. Basically, I read parts of the CSS section in my
"O'Reily Dynamic HTML" book. Any CSS books you'd recommend as a
tutorial, moreso than a reference?

Thanks,
Mario

[Brian]

Mario T. Lanza wrote:

I've been using CSS for over a year. I kinda taught myself in a
very unprofessional way.
Me too. I've managed to teach myself better HTML methods, plus -- from
the beginning -- CSS, Javascript/DOM rudiments, PHP, and now MySQL.
Being unemployed has helped. ;-)
Any CSS books you'd recommend as a tutorial, moreso than a
reference?

I'm afraid the only book on CSS I ever read was old at the time I
wrote it; it talked about support only in NS 4 and IE 4. I've started
a book _Web Publishing_, but there's very little on CSS.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/