width of textarea (not 100%) in firefox

[Roderik]

Hi,

On http://www.cyl.nl/tips/index.html you see a textarea. In firefox the
textarea falls over the border of the form, in internet explorer it fits
exactly into the form. Any idea how to get the appearance in firefox the
same?

kind regards,

Roderik

[Spartanicus]

Roderik <ma**@roderik.net> wrote:

On http://www.cyl.nl/tips/index.html you see a textarea. In firefox the
textarea falls over the border of the form, in internet explorer it fits
exactly into the form. Any idea how to get the appearance in firefox the
same?

IE and Opera 7 get this wrong. In the css box model width=100% refers to
the content excluding borders, padding and margin. Browsers auto
generate borders for form elements, hence it spills over its container.

CSS3 may offer 2 different box models via the box-sizing property, Moz
currently supports a preliminary implementation of this via the
proprietary -moz-box-sizing:border-box

Adding that to the form element should fix it.

--
Spartanicus

[Roderik]

Spartanicus wrote:

Roderik <ma**@roderik.net> wrote:

On http://www.cyl.nl/tips/index.html you see a textarea. In firefox the
textarea falls over the border of the form, in internet explorer it fits
exactly into the form. Any idea how to get the appearance in firefox the
same?

IE and Opera 7 get this wrong. In the css box model width=100% refers to
the content excluding borders, padding and margin. Browsers auto
generate borders for form elements, hence it spills over its container.

CSS3 may offer 2 different box models via the box-sizing property, Moz
currently supports a preliminary implementation of this via the
proprietary -moz-box-sizing:border-box

Adding that to the form element should fix it.

Wow, it works! Is it possible in CSS2 to give a width of 100% minus 4px
or something, because these problems arise quite often.

[Spartanicus]

Roderik <ma**@roderik.net> wrote:

Is it possible in CSS2 to give a width of 100% minus 4px
No.
because these problems arise quite often.

It isn't an issue for block level elements if the (default) value of
"auto" is used for the width property. Form elements are a strange breed
of animal, they are not inline, block, nor do they behave as shrink
wrapping elements. Browser rendering with regard to css box model
compliance varies wildly.

--
Spartanicus