bechte: Kann man mit Stylesheets einen Button im IE derart beinflussen?

Beitrag lesen

Hi Salvadore,

Das ist ja gerade mein Problem im IE, zumindest im IE Version 6. Je länger die Inhalte der Value im Button werden, umso größer werden die Paddings im Button. Und der IE ignoriert einfach das padding: 0; Daher auch mein text-align: left; denn dadurch habe ich wenigstens Links kein Padding.

Ich hatte genau dasselbe Problem, doch konnte es mit folgender Angabe für den button lösen, vielleicht hilft es Dir (ich hatte anstelle von input ein button element genommen, ist aber identisch):

<button type="submit" class="myButton">Angezeigter Text</button>

Im Header schreibst Du dazu:

<style type="text/css">
   button.myButton {
      display: block;    /* block element needs a width... */
      width: 200px;      /* take a value that fits w/ u ;) */
      margin: 0;
      padding: 1px 0;    /* 1px padding, falls Du ein Border setzen willst, da sonst der Border oben/unten abgeschnitten wird. */
   }
</style>

Buttons sind ein Sonderfall der von allen Browsern seltsame, unterschiedliche Style mit auf den Weg bekommen. Ich wünsche mir hier eine Generalisierung, aber wer weiß wann die kommt. Mache deshalb aus dem Button ein block-Element und gib ihm eine feste Breite. Dann kannst du auch das Padding positiv beeinflussen.

Ich habe aber noch ein anderes Problem: Der Firefox erkennt das margin-(left|right): auto scheinbar nicht. Ich habe 3 Buttons in einer Zeile darstellen wollen (einer float: left, einer float: right, einer float: none). Die beiden äußeren werden schön rausgeschoben und der mittlere (der ohne float) rutscht im IE sauber in die Mitte. Der Firefox verschiebt ihn jedoch um die Breite des left-floated Buttons. *schrecklich nervig* ;-)

Hat da evtl. auch jemand eine Idee? Danke :-)

Gruß bechte