Markus: Opera und input text-Felder height

Hallo,

bei den Browsern:FF,NS und IE werden die input type="text"-Felder alle richtig angezeigt.
Nur bei Opera werden sie zu klein angezeigt.

<input type="text" name="username" style="width: 115px; height: 12px; font-size: 11px;" />

Was kann man da dagegen tun?

lg
Markus

  1. Hallo Markus,

    bei den Browsern:FF,NS und IE werden die input type="text"-Felder alle richtig angezeigt. Nur bei Opera werden sie zu klein angezeigt.

    Bei mir wird das Feld in allen Browsern (einschließlich Opera) korrekt angezeigt. Nämlich mit 115 x 12 Pixel. Nur halt die Schriftgröße ist zu groß gewählt. Bei 9pt passts grade noch so rein. Leserlich isses dabei aber nicht mehr...

    eumil

    1. Hallo eumil,

      Bei mir wird das Feld in allen Browsern (einschließlich Opera) korrekt angezeigt.

      Bei mir nicht.
      Was hast du anders gemacht als:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
              "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
       <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <title>test</title>
      </head>
      <body>
       <input type="text" name="username" style="width: 115px; height: 12px; font-size: 11px;" />
      </body>
      </html>

      Schau auch mals auf meinen Screenshot:

      1. hi,

        Was hast du anders gemacht als:

        vielleicht hat er erst mal validen code erzeugt, da sonst eine fehlersuche sinnfrei ist.

        <body>
        <input type="text" name="username" style="width: 115px; height: 12px; font-size: 11px;" />

        input als replaced inline element hat in XHTML als direktes kindelement nichts in body verloren.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Hallo,

          vielleicht hat er erst mal validen code erzeugt, da sonst eine fehlersuche sinnfrei ist.

          Musst du den immer und über alles raunzen?

          input als replaced inline element hat in XHTML als direktes kindelement nichts in body verloren.

          Um das geht es aber jetzt wirklich nicht, da sogar der W3CValidator nicht mal darüber raunzt, oder hast du es vorher damit nicht ausprobiert.
          Also bitte vorher testen und dann erst posten, ok?

          Noch eine Frage an dich wahsaga:
          Hast du es überhaupt getestet?

          lg
          Markus

          1. hi,

            Um das geht es aber jetzt wirklich nicht, da sogar der W3CValidator nicht mal darüber raunzt

            sorry, mein fehler. das galt für strict, nicht für transitional.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            1. Hallo wahsaga,

              sorry, mein fehler. das galt für strict, nicht für transitional.

              sorry, dass ich gerade gebissen habe.
              Danke für die Info, dies wusste ich zB nicht.

              lg
              Markus

            2. Hi,

              sorry, mein fehler. das galt für strict, nicht für transitional.

              Ups, hätte doch erst alles lesen sollen.

              cu,
              Andreas

              --
              Warum nennt sich Andreas hier MudGuard?
              Schreinerei Waechter
              Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        2. Hi,

          ich hatte dieses Problem aber auch schon oft. Selbst wenn das input-Feld in einem <p> steckt weicht die Höhe doch erheblich ab.  Habe das gerade so getestet wie Wahsaga vorgeschlagen hat. Keine Veränderung.
          Ich habe das letztendlich so gelöst dass ich einen Opera-spezifischen Hack benutzt habe. Nicht schön. Bin deshalb gespannt ob es eine bessere Lösung gibt.

          1. Hallo Mel,

            habe das letztendlich so gelöst dass ich einen Opera-spezifischen Hack benutzt habe

            Wie schaut dieser Hack aus?
            Bitte poste den mal.

            lg
            Markus

            1. Hier kommt der hack...

              /*Hack Opera + Safari*/
               html:first-child>b\ody .beispielklasse    {
              height: 1em;
              }

              /*Hack Opera*/
              @media screen and (min-width: 0px){
              .beispielklasse {

              height: 1em;

              }
              }

              Weiss nicht ob Du auch unter MAC OS testest. Deshalb hab ich mal beide Hackvarianten hingeschrieben. Funktionieren unter den jeweils neuesten Versionen bei den Versionen 7 + bei Opera habe ich nicht getestet. Habe die Hacks mal in den unendlichen WEiten des Internets gefunden, falls ich irgendwelche Copyright-Rechte jetzt nicht dazugeschrieben habe - sorry.

              1. Hallo,

                kannst du mir dies anhand eines Beispiels posten.
                Leider check ich dies nicht so richtig

                danke
                Markus

                1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                          "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

                  <style type="text/css">

                  /*fuer mozilla, IE etc.*/
                  #deine_bezeichnung {
                  width: 115px;
                  height: 12px;
                  font-size: 11px;
                  }

                  /*Hack Opera*/
                  @media screen and (min-width: 0px){
                  #deine_bezeichnung {

                  height: 17px;

                  }
                  }

                  </style>

                  <html xmlns="http://www.w3.org/1999/xhtml">
                  <head>
                   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
                    <title>test</title>
                  </head>
                  <body>
                   <input type="text" name="username" id="deine_bezeichnung" />
                  </body>
                  </html>

                  Besser wären relative Höhenanganbe, also in em.

                  vg melanie

                  1. Hi Melanie,

                    vielen Dank.
                    Jetzt hab ich es endlich hinbekommen.

                    lg
                    Markus

                    1. hallo Markus,

                      super das freut mich. Wie gesagt ich bin da auch dran verzweifelt bis ich auf diesen Hack gestossen bin. Zwar soll man diese nach Möglichkeit vermeiden aber es scheint für dieses Darstellungsproblem sonst keine Lösung zu geben.

                      lg melanie

                      1. Hallo Melanie,

                        ich hoffe ich kann dir auch mal helfen.

                        lg+Danke nochmals
                        Markus

                  2. Hallo Mel.

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

                    "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

                      
                    Hat der Einsatz dieser speziellen DTD einen bestimmten Grund?  
                      
                      
                    Einen schönen Donnerstag noch.  
                      
                    Gruß, Ashura  
                    
                    -- 
                    Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|  
                    [30 Days to becoming an Opera8 Lover](http://operalover.tntluoma.com/8/) -- [Day 21: Toolbars](http://operalover.tntluoma.com/8/day_21_toolbars)  
                    Meine Browser: [Opera 8.01](http://my.opera.com/noctus/affiliate/download/) | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0  
                    [\[Deshalb frei! - Argumente pro freie Software\]](http://deshalbfrei.org/)
                    
                    1. Hoi Ashura,

                      nö hat er nicht. Ich habe ihn nur kopiert, es ist der Code von Markus, der in der Antwort davor gepostet wurde.

                      Allerdings hat das wohl nix mit dem input-Problem zu tun  weil ich wie gesagt dieses Problem schon ganz oft hatte....auch mit anderem doctype-- aber ich lasse mich gerne belehren ;)

                      vg mel

        3. Hi,

          input als replaced inline element hat in XHTML als direktes kindelement nichts in body verloren.

          Nonsens.
          Dies trifft auf XHTML 1.0 transitional nicht zu.

          Und dem von Markus angegebenen Code ist klar und deutlich zu entnehmen, daß es sich um XHTML 1.0 transitional handelt.

          cu,
          Andreas

          --
          Warum nennt sich Andreas hier MudGuard?
          Schreinerei Waechter
          Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      2. Hi Markus,

        Meine Seite: http://self.se.ohost.de/fremd/input.html.

        Gruß, eumil

        1. Hallo eumil,

          Meine Seite: http://self.se.ohost.de/fremd/input.html.

          So jetzt muss ich mal nachfragen welche Version du benutzt, da bei mir das input-Feld trotzdem kleiner als in allen anderen Browsern angezeigt wird.
          Ich habe hier 8.01 Build 7642

          lg
          Markus

          1. Hi Markus

            So jetzt muss ich mal nachfragen welche Version du benutzt

            Ich habe hier (leider noch) die Version 8.0 Build 7561 am Laufen. In der 8.01 wurde soweit ich weiß nur ein Sicherheitsloch gestopft, von daher hat das keinen (oder sollte das keinen) Einfluss auf die Größe der Input-Box nehmen. Kann mir ehrlich gesagt die falsche Darstellung bei dir nicht erklären, sorry.

            eumil