RavenPixel: Problem das <textarea> in Firefox größer ist, als in allen anderen Browsern

Hi,

ich habe ein Formular erstellt, welches ein <textarea> beinhaltet.

Soweit gibt es auch keine weiteren Probleme, jedoch ist dieses Feld in der Ansicht bei Mozilla Firefox viel größer als in allen anderen Browsern, in denen ich es gestetet habe (Chrome, Edge, Opera).

Dazu der Code:

<textarea readonly="true" class="bemku" name="bemerkung" cols="90" rows="10" maxlength="10000" wrap="soft" style="font-size: 14px;"></textare>

Kann mir dazu jemand eine Erklärung geben bzw mir verraten, wie ich das verhindern könnte?

  1. Hallo RavenPixel,

    <textarea readonly="true" class="bemku" name="bemerkung" cols="90" rows="10" maxlength="10000" wrap="soft" style="font-size: 14px;"></textare>

    Du wirst in allen Browsern kleine Unterschiede sehen, weil die Abmessungen mithilfe der Größe eines durchschnittlichen Buchstaben berechnet wird. Außerdem kann es unterschiedliche Defaultabmessungen geben, zudem sind textareas in der Größe veränderbar.

    Es mag auch sein, dass sich der Firefox am fehlerhaften schließenden Tag stört.

    <textarea readonly="true" class="bemku" name="bemerkung" cols="90" rows="10" maxlength="10000" wrap="soft" style="font-size: 14px;"></textare>
    

    Styleangaben sollten ins CSS

    Kann mir dazu jemand eine Erklärung geben bzw mir verraten, wie ich das verhindern könnte?

    Durch Größenangaben mit CSS.

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
  2. @@RavenPixel

    ich habe ein Formular erstellt, welches ein <textarea> beinhaltet.

    Zu welchem Zweck, wenn du readonly setzt?

    Soweit gibt es auch keine weiteren Probleme, jedoch ist dieses Feld in der Ansicht bei Mozilla Firefox viel größer als in allen anderen Browsern, in denen ich es gestetet habe (Chrome, Edge, Opera).

    Du hast vermutlich keine Breite für das Textfeld angegeben.

    LLAP 🖖

    --
    “I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl
  3. Hallo und guten Abend,

    Dazu der Code:

    <textarea readonly="true" class="bemku" name="bemerkung" cols="90" rows="10" maxlength="10000" wrap="soft" style="font-size: 14px;"></textarea>
    

    Kann mir dazu jemand eine Erklärung geben bzw mir verraten, wie ich das verhindern könnte?

    Ich finde das auch immer wieder spannend ;-)

    Aber dazu müsste man jetzt wissen, nach welchemn Font in welcher Größe die Textarea die Zeilen und Spalten bemisst, wie hoch sie die Zeilenhöhe annimmt, usw.

    Standardfont ist vermutlich ein monospace.

    ich habe da mal selber 'was gebastelt und da ist die Textarea nun in allen hier verfügbaren Browsern gleich dargestellt. Du kannst aber sehen, dass es eine Diskrepanz zwischen Font-Size und Anzahl der Zeilen gibt. Das liegt eben daran, dass Zeilenhöhe <> Fontsize ist!

    <!DOCTYPE html>
    <html lang="de">
    	<head>
    		<meta charset="UTF-8">
    		<title>Textarea und Größenangaben</title>
    	
    		<style type="text/css">
    			body {
    				font-family:sans-serif;
    				font-size:12pt;
    			}
    			
    			#ta1{
    				font-family:courier, monospace;
    				font-size:1em;
    				width:20em;
    				height:6em;
    			}
    		</style>
    	</head>
    	<body>
    		<textarea id="ta1"></textarea>
    
    	</body>
    </html>  
    
    

    Grüße
    TS

    --
    es wachse der Freifunk
    http://freifunk-oberharz.de
    1. @@TS

      dass Zeilenhöhe <> Fontsize ist!

      Merkel-Raute?

      Das hat bei mir aber eine Weile gedauert, bis es mir dämmerte, dass du „ungleich“ meintest. Warum nimmst du nicht das Zeichen ≠, wenn schon nicht Text?

      LLAP 🖖

      --
      “I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl
      1. Hallo und guten Morgen,

        @@TS

        dass Zeilenhöhe <> Fontsize ist!

        Merkel-Raute?

        Das hat bei mir aber eine Weile gedauert, bis es mir dämmerte, dass du „ungleich“ meintest. Warum nimmst du nicht das Zeichen ≠, wenn schon nicht Text?

        Wir schaffen das!

        Nach meinem Verständnis als alter ASCII-Geschädigter war das vollkommen klar, was gemeint war ;-P

        Erklär doch bitte lieber mal, wie da die Zusammenhänge genau sind bei den Größenangaben für Font, Zeilenhöhe, Laufweite, Anzahl Spalten, Anzahl Zeilen. Das Phänomen ist ja nicht neu, aber wirklich durchschaut habe ich das auch bis heute noch nicht!

        Grüße
        TS

        --
        es wachse der Freifunk
        http://freifunk-oberharz.de
        1. @@TS

          Erklär doch bitte lieber mal, wie da die Zusammenhänge genau sind bei den Größenangaben für Font, Zeilenhöhe, Laufweite, Anzahl Spalten, Anzahl Zeilen.

          Siehe Spec, cols: “The user agent may use the textarea element’s character width as a hint to the user as to how many characters the server prefers per line (e.g., for visual user agents by making the width of the control be that many characters).”

          Konjunktiv. (Hervorhebungen von mir.)

          rows: “Visual user agents should set the height of the control to the number of lines given by character height.”

          LLAP 🖖

          --
          “I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl
      2. Hallo,

        dass Zeilenhöhe <> Fontsize ist!

        Merkel-Raute?

        Das hat bei mir aber eine Weile gedauert, bis es mir dämmerte, dass du „ungleich“ meintest.

        bei mir nicht, denn ich erinnere mich dunkel, dass <> auch schon in BASIC (lang, lang ist's her) der Operator für ungleich ist, und wenn mich meine Erinnerung nicht täuscht, auch in Pascal.

        Warum nimmst du nicht das Zeichen ≠, wenn schon nicht Text?

        Oder wenigstens !=.

        Ciao,
         Martin

        --
        Es gibt eine Theorie, die besagt, dass das Universum augenblicklich durch etwas noch Komplizierteres und Verrücktes ersetzt wird, sobald jemand herausfindet, wie es wirklich funktioniert. Es gibt eine weitere Theorie, derzufolge das bereits geschehen ist.
        - (frei übersetzt nach Douglas Adams)
        1. Hallo Der Martin,

          denn ich erinnere mich dunkel, dass <> auch schon in BASIC (lang, lang ist's her) der Operator für ungleich ist, und wenn mich meine Erinnerung nicht täuscht, auch in Pascal.

          Sie täuscht dich nicht.

          Bis demnächst
          Matthias

          --
          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
          1. @@Matthias Apsel

            denn ich erinnere mich dunkel, dass <> auch schon in BASIC (lang, lang ist's her) der Operator für ungleich ist, und wenn mich meine Erinnerung nicht täuscht, auch in Pascal.

            Sie täuscht dich nicht.

            Ich erinnere mich auch dunkel, dass es mal Sprachen gab, in denen das so war. Die Erinnerung täuscht nicht: lang, lang ist’s her.

            LLAP 🖖

            --
            “I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl
            1. Hallo Gunnar Bittersmann,

              Ich erinnere mich auch dunkel, dass es mal Sprachen gab, in denen das so war.

              Pascal lebt.

              Bis demnächst
              Matthias

              --
              Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
            2. Ich erinnere mich auch dunkel, dass es mal Sprachen gab, in denen das so war.

              ANSI SQL?!?

    2. Hallo und guten Abend,

      noch ein kleiner Nachtrag: die Seite über die Maßeinheiten gibt eine Übersicht über die unterschiedlichen Maßsysteme für HTML bzw. in CSS.

      Hier möchte ich Dir für die Textarea besonders die Einheit ch ans Herzlegen für die Spaltenzahl. Berücksichtige aber, dass sich der vertikale Scrollbalken einschalten könnte. Der ist beim Firefox Bestandteil der Textarea-Breite (SPaltenzahl), beim IE war er zusätzlich.

      Für 20 Spalten bietet sich eine Angabe von "width:20.15ch" an. Für 5 Zeilen eine Angabe von "height:5.75em".

      Grüße
      TS

      --
      es wachse der Freifunk
      http://freifunk-oberharz.de