oxo888oxo: Formularfeld neben Input-Button

SELF-Forum

Formularfeld neben Input-Button

oxo888oxo
– Informationen zu den Bewertungsregeln

Hallo

Ich möchte in meiner Seitennavigation für die Suchfunktion ein Eingabefeld und daneben einen "Suchen"-Button erstellen. Das habe ich auch hinbekommen.

Leider wird im Internet Explorer 8 die Sache nicht ganz korrekt dargestellt.
Der "Suchen"-Button ist dort leider etwas 3 Pixel höher als das Eingabefeld.
Warum ist das denn so?
Wie kann ich das beheben?

Hier der dazugehörige Code:

<!DOCTYPE html>  
  
  <head>  
    <meta charset="utf-8">  
    <title>blabla</title>  
  
<style>  
html {  
  height:101%;  
}  
  
body {  
  margin: 0;  
  text-align: center;  
  font-family: Helvetica, Arial, sans-serif;  
  font-size: 100%;  
  line-height: 130%;  
  color: #313131;  
}  
  
#seite {  
  width: 790px;  
  border-left: 3px solid #313131;  
  border-right: 3px solid #313131;  
  border-bottom: 3px solid #313131;  
  margin: 0 auto;  
  text-align: left;  
}  
  
#navigation {  
  float: left;  
  padding-top: 5px;  
  margin-bottom: 50px;  
  width: 239px;  
  line-height: 180%;  
  font-size: 1.2em;  
}  
  
#navigation form {  
  padding-left: 15px;  
}  
  
#navigation input#suchfeld {  
  border: 1px solid #313131;  
  background-color: #fff;  
  height: 22px;  
  width: 135px;  
}  
  
#navigation input#suchbutton {  
  border: 1px solid #313131;  
  border-left: none;  
  background-color: #F0F0F0;  
  height: 26px;  
  width: 60px;  
  cursor: pointer;  
}  
  
#inhalt {  
  margin-left: 260px;  
  padding: 10px 0 20px 0;  
}  
  
#fusszeile {  
  width: 786px;  
  border-top: 2px solid #313131;  
  clear: both;  
  margin: 0;  
  padding: 20px 2px;  
  text-align: center;  
  font-size: 1.2em;  
  font-weight: bold;  
  color: #ca1600;  
}  
</style>  
  
  </head>  
  
  <body>  
  
    <div id="seite">  
  
      <div id="navigation">  
        <form method="get" action="/_xx_search.php">  
          <input id="suchfeld" name="searchwords" type="text"><input id="suchbutton" type="submit" value="Suchen">  
        </form>  
      </div>  
  
      <div id="inhalt">  
  
        <p>  
          blöablö  
        </p>  
  
      </div>  
  
      <p id="fusszeile">  
        huuup :-)  
      </p>  
  
    </div>  
  
  </body>  
  
</html>

Gruß
Ingo

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Formularfeld neben Input-Button

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, oxo888oxo!

    Leider wird im Internet Explorer 8 die Sache nicht ganz korrekt dargestellt.
    Der "Suchen"-Button ist dort leider etwas 3 Pixel höher als das Eingabefeld.
    Warum ist das denn so?

    keine Ahnung. In den IE8 sollte man nicht mehr unbedingt soviel Zeit investieren, zumal die Bedienung sicher nicht an den 3px hängen wird.

    Eine Seite muss und wird auch nicht in allen Browsern gleich aussehen.

    Wie kann ich das beheben?

    Ich würds, wie gesagt lassen.

    Buttons gestaltet das Betriebssystem selbst, du hast Möglichkeiten über height oder margin oder padding was zu steuern.

    Es gibt einen CSS-Hack der nur für den IE8 gilt

    /* alle Browser */  
p {  
  color: red;  
}  
/* alle Browser, außer IE 8 */  
p, #a#b {  
  color: blue;  
}

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen HAL und Halsbandarassari.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Formularfeld neben Input-Button

      Bobby
      – Informationen zu den Bewertungsregeln

      Moin

      [...] In den IE8 sollte man nicht mehr unbedingt soviel Zeit investieren, [...]

      Wie kommst du zu dieser Aussage? 20,85% Anteil (laut http://www.netmarketshare.com/) sollte man mE nicht außer acht lassen.

      Eine Seite muss und wird auch nicht in allen Browsern gleich aussehen.

      Zumindest auf gleichen Devices sollte die Seite möglichst gleich aussehen. Das ist auch umsetzbar mit entsprechenden Aufwand.

      Gruß Bobby

      --
      -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
      ### Henry L. Mencken ###
      -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
      ### Viktor Frankl ###
      ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Formularfeld neben Input-Button

        Auge
        – Informationen zu den Bewertungsregeln

        Hallo

        [...] In den IE8 sollte man nicht mehr unbedingt soviel Zeit investieren, [...]

        Wie kommst du zu dieser Aussage? 20,85% Anteil (laut http://www.netmarketshare.com/) sollte man mE nicht außer acht lassen.

        … mit rückläufigem Anteil. Sich dafür an drei Pixeln abzuarbeiten muss nicht sein.

        Eine Seite muss und wird auch nicht in allen Browsern gleich aussehen.

        Zumindest auf gleichen Devices sollte die Seite möglichst gleich aussehen. Das ist auch umsetzbar mit entsprechenden Aufwand.

        Nöö. Wer hat auf seinem Rechner mehrere Browser installiert? Wer ruft eine Seite auf einem Gerät mit mehreren Browser auf und bemerkt dabei unterschiedliche Darstellungen? Richtig, niemand außer uns. Alle anderen da draußen interessiert das einen feuchten Kehricht.

        Tschö, Auge

        --
        Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
        Terry Pratchett, "Wachen! Wachen!"
        ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
        Veranstaltungsdatenbank Vdb 0.3
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Formularfeld neben Input-Button

        1UnitedPower
        – Informationen zu den Bewertungsregeln

        Meine Herren!

        [...] In den IE8 sollte man nicht mehr unbedingt soviel Zeit investieren, [...]

        Wie kommst du zu dieser Aussage? 20,85% Anteil (laut http://www.netmarketshare.com/) sollte man mE nicht außer acht lassen.

        Net Applications fallen mit ihren Statistiken übrigens deutlich aus dem Rahmen:

        W3Counter: ~3,74%
        Wikimedia: ~3,29%
        Statcounter: ~6.54%

        Hier gibts noch was zum Strichprobenumfang:
        http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

        --
        “All right, then, I'll go to hell.” – Huck Finn
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Formularfeld neben Input-Button

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    Leider wird im Internet Explorer 8 die Sache nicht ganz korrekt dargestellt.
    Der "Suchen"-Button ist dort leider etwas 3 Pixel höher als das Eingabefeld.
    Warum ist das denn so?
    #navigation input#suchfeld {
      border: 1px solid #313131;
      background-color: #fff;
      height: 22px;
      width: 135px;
    }

    #navigation input#suchbutton {
      border: 1px solid #313131;
      border-left: none;
      background-color: #F0F0F0;
      height: 26px;
      width: 60px;
      cursor: pointer;
    }

    Du setzt nur für 2 von 3 Eigenschaften, die die Gesamthöhe beeinflussen, explizit Werte. Padding läßt Du auf Browserdefault.
    Und dann gehst Du davon aus, daß bei dem Textfeld 4 Pixel weniger Padding vorhanden sind als bei dem Button (oder wie erklärst Du sonst die unterschiedlichen height-Angaben, obwohl du gleich hohe Elemente haben willst?).

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Formularfeld neben Input-Button

      oxo888oxo
      – Informationen zu den Bewertungsregeln

      Du setzt nur für 2 von 3 Eigenschaften, die die Gesamthöhe beeinflussen, explizit Werte.

      Welches ist denn die dritte Eigenschaft, für die ich vergessen habe, einen Wert für die Höhe zu setzen?

      Padding läßt Du auf Browserdefault.

      OK, alles klar. Das werde ich korrigieren.

      Und dann gehst Du davon aus, daß bei dem Textfeld 4 Pixel weniger Padding vorhanden sind als bei dem Button (oder wie erklärst Du sonst die unterschiedlichen height-Angaben, obwohl du gleich hohe Elemente haben willst?).

      OK stimmt.
      Auch das wrde ich nochmal ändern.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Formularfeld neben Input-Button

      oxo888oxo
      – Informationen zu den Bewertungsregeln

      Du setzt nur für 2 von 3 Eigenschaften, die die Gesamthöhe beeinflussen, explizit Werte.

      Meinst Du da die Schriftgröße als dritte Eigenschaft?

      Padding läßt Du auf Browserdefault.
      Und dann gehst Du davon aus, daß bei dem Textfeld 4 Pixel weniger Padding vorhanden sind als bei dem Button (oder wie erklärst Du sonst die unterschiedlichen height-Angaben, obwohl du gleich hohe Elemente haben willst?).

      Ich habe nun die Schriftgröße, die Höhe und Padding für das Eingabefeld und den Butten auf die gleichen Werte gesetzt. Den Code siehst Du unten. Aber leider kalppt die Darstellung nun überhaupt nicht mehr. Auch nicht in den aktuellen Browsern.

      Wo ist denn jetzt mein Fehler?

      <!DOCTYPE html>  
  
  <head>  
    <meta charset="utf-8">  
    <title>blabla</title>  
  
<style>  
html {  
  height:101%;  
}  
  
body {  
  margin: 0;  
  text-align: center;  
  font-family: Helvetica, Arial, sans-serif;  
  font-size: 100%;  
  line-height: 130%;  
  color: #313131;  
}  
  
#seite {  
  width: 790px;  
  border-left: 3px solid #313131;  
  border-right: 3px solid #313131;  
  border-bottom: 3px solid #313131;  
  margin: 0 auto;  
  text-align: left;  
}  
  
#navigation {  
  float: left;  
  padding-top: 5px;  
  margin-bottom: 50px;  
  width: 239px;  
  line-height: 180%;  
  font-size: 1.2em;  
}  
  
#navigation form {  
  padding-left: 15px;  
}  
  
#navigation input#suchfeld {  
  border: 1px solid #313131;  
  background-color: #fff;  
  font-size: 1em;  
  height: 22px;  
  padding: 3px;  
  width: 135px;  
}  
  
#navigation input#suchbutton {  
  border: 1px solid #313131;  
  border-left: none;  
  background-color: #F0F0F0;  
  font-size: 1em;  
  height: 22px;  
  padding: 3px;  
  width: 60px;  
  cursor: pointer;  
}  
  
#inhalt {  
  margin-left: 260px;  
  padding: 10px 0 20px 0;  
}  
  
#fusszeile {  
  width: 786px;  
  border-top: 2px solid #313131;  
  clear: both;  
  margin: 0;  
  padding: 20px 2px;  
  text-align: center;  
  font-size: 1.2em;  
  font-weight: bold;  
  color: #ca1600;  
}  
</style>  
  
  </head>  
  
  <body>  
  
    <div id="seite">  
  
      <div id="navigation">  
        <form method="get" action="/_xx_search.php">  
          <input id="suchfeld" name="searchwords" type="text"><input id="suchbutton" type="submit" value="Suchen">  
        </form>  
      </div>  
  
      <div id="inhalt">  
  
        <p>  
          blöablö  
        </p>  
  
      </div>  
  
      <p id="fusszeile">  
        huuup :-)  
      </p>  
  
    </div>  
  
  </body>  
  
</html>
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln