nicht angemeldet
button-width im IE
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
-
Hi Mathias,
Ursache ist diese Deklaration, die du für deinen Button benutzt:
width:auto;
Da benutzt dann halt jeder Browser seine default Einstellung und IEs denken nun mal, dass jeder Button links und rechts 500 Meter Platz bräuchte. Vergib einfach feste Breiten passend zur Länge des Inhalts/ Beschriftung.
Gruß
Antipitch-
Hi Antipitch
Vergib einfach feste Breiten passend zur Länge des Inhalts/ Beschriftung.
Das würde ja bedeuten für jeden Button eine separate css-Angabe zu schreiben und diese dann bei einer Änderung des Textes jeweils anzupassen. Gibt es da keine elegantere Lösung?
Wie kann ich den IE dazu bringen, einen korrekten width-Wert zu berechnen?
-
Ah, ich habs.
IE braucht zusätzlich ein overflow:visible, um width:auto korrekt zu berechnen:
http://jehiah.cz/archive/button-width-in-ieManno!
-