oxo888oxo: Formularfeld neben Input-Button

Beitrag lesen

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