width of textarea (not 100%) in firefox

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Roderik
    #1

    width of textarea (not 100%) in firefox

    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
    Tags: None
    • Spartanicus
      #2
      Re: width of textarea (not 100%) in firefox

      Roderik <mail@roderik.n et> wrote:
      [color=blue]
      >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?[/color]

      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

        Comment

        • Roderik
          #3
          Re: width of textarea (not 100%) in firefox

          Spartanicus wrote:[color=blue]
          > Roderik <mail@roderik.n et> wrote:
          >
          >[color=green]
          >>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?[/color]
          >
          >
          > 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.
          >[/color]

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

            Comment

            • Spartanicus
              #4
              Re: width of textarea (not 100%) in firefox

              Roderik <mail@roderik.n et> wrote:
              [color=blue]
              >Is it possible in CSS2 to give a width of 100% minus 4px[/color]

              No.
              [color=blue]
              >because these problems arise quite often.[/color]

              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

                Comment

                Previous template Next
                Working...