nam: button-width im IE

Beitrag lesen

SELF-Forum

button-width im IE

nam Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo da draussen!

Folgendes Problem (natürlich mit dem IE):

Unter einem Text-Input-Feld habe ich drei <button>s, die alle nebeneinander stehen sollten. Im Firefox und Safari werden dargestellt, wie ich es erwarte. Der IE (6 und 7) fügt zwischen Text und Rahmen einen grossen Leerraum ein, wodurch der dritte Button auf die nächste Zeile umgebrochen wird.

Hier der Code (verkürzt auf das Problem):

  
<?xml version="1.0" encoding="UTF-8" ?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>Test</title>  
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />  
<style type="text/css">  
* {  
 padding:0;  
 margin:0;  
 border:0;  
 background-color:#EEEEEE;  
}  
html {  
  
}  
body {  
 font-family:Verdana,'Helvetica Neue', Helvetica, sans-serif;  
 font-size:10pt;  
 background-color:#EEEEEE;  
 color:#333333;  
 margin: 0 auto;  
 padding: 1em;  
}  
button {  
 font-family:Verdana,'Helvetica Neue', Helvetica, sans-serif;  
 cursor:pointer;  
 margin-bottom:1em;  
        font-size:0.8em;  
 border:1px solid #CCCCCC;  
 color:#CC3300;  
 padding:0em 0.5em 0em 0.5em;  
 width:auto;  
}  
form {  
 margin-bottom:1em;  
}  
input {  
 font-family:Verdana,'Helvetica Neue', Helvetica, sans-serif;  
}  
#console {  
 text-align:center;  
}  
#console form {  
 font-size:1em;  
 display:block;  
 margin: 0 auto;  
 width:40em;  
 text-align:center;  
}  
#feld1 {  
 font-size:2em;  
 background-color:#FFFFFF;  
 border:1px solid #CCCCCC;  
 padding:0.2em 0.2em;  
 width:16em;  
 margin-bottom:0.5em;  
 vertical-align:top;  
}  
</style>  
  
</head>  
<body>  
<div id="console">  
 <form action="" method="post">  
  <input name="feld1" id="feld1" type="text" value="Eine Eingabe" /><br />  
  <button name="Btn1" id="Btn1" type="reset" value="Zurücksetzen!" title="Zurücksetzen!">Zurücksetzen!</button>  
  <button name="Btn2" id="Btn2" type="button" value="Btn2" title="Btn2">Btn2 mit langem Namen</button>  
  <button name="Btn3" id="Btn3" type="button" value="Btn3" title="Btn3">Btn3 mit langem Namen</button>  
 </form>  
</div>  
</body>  
</html>

Und hier der Link: http://www.mnn.ch/test.html

Was mache ich falsch?
Danke und Gruss,
Mathias

Beitrag melden
–
Informationen zu den Bewertungsregeln