Kann man mit Stylesheets einen Button im IE derart beinflussen?

[Salvadore]

Hallo Forumsteilnehmer!

Ich möchte gerne, dass sich im IE kein Padding zwischen (Value)Text und Buttonrand befindet. Wie kann man das Lösen? Der Innenabstand wird bei mehr Text immer größer. Feste Breite ist auch ncith möglich, da ich wechselnde Einträge habe.

<input type="submit" value="Ein längerer Text auf einem Button" style="padding: 0;text-align: left;">

Inline Styles sind schrecklich. Aber dies soll ja nur zur Demonstration dienen.

Gruß aus der Nichts

Salvadore

[Sven (κ)]

Hallo Salvadore,

Ich möchte gerne, dass sich im IE kein Padding zwischen (Value)Text und Buttonrand befindet. Wie kann man das Lösen? Der Innenabstand wird bei mehr Text immer größer. Feste Breite ist auch ncith möglich, da ich wechselnde Einträge habe.
<input type="submit" value="Ein längerer Text auf einem Button" style="padding: 0;text-align: left;">

Deiner Lösung könntest du das "text-align: left;" entbehren, weil dies Standard ist. Frage: Was geht daran nicht?

Inline Styles sind schrecklich. Aber dies soll ja nur zur Demonstration dienen.

Eigentlich sind sie ziemlich praktisch. Und natürlich kannst du das, wenn du das mit allen <input>-Buttons machen willst, locker per "normalen" CSS-File machen (Siehe SELFHTML).

Z.B., in dem du:

<input type="submit" value="Viel Text" class="button">

in dein HTML schreibst und in den head-Bereich:

<style type="text/css">

input.button {
       padding: 0;
       text-align: left;
   }

</style>

Der Sinn der definierten Klasse (siehe SELFHTML) ist, damit nur Buttons (value="submit" oder "reset" oder "button") so aussehen. Seit CSS 2 kann man auch über die Attribute gehen, aber du legtest Wert auf den IE, und der kann das nicht.

Grüße,

Sven

[Der Martin]

Hallo Sven,

<input type="submit" value="Ein längerer Text auf einem Button" style="padding: 0;text-align: left;">
Deiner Lösung könntest du das "text-align: left;" entbehren, weil dies Standard ist.

nicht in einem button-Element. Das hat normalerweise text-align:center.

Frage: Was geht daran nicht?

Das hat Salvadore doch schon gesagt: Das padding:0 wird anscheinend ignoriert, das tatsächliche Padding scheint mit der Textlänge zu wachsen. Wobei sich hier die Frage aufdrängt: Mit welchem Browser, welchem DOCTYPE? Gibt es ein Beispiel online, an dem man das nachvollziehen kann?

Inline Styles sind schrecklich.
Eigentlich sind sie ziemlich praktisch.

Ja, aber nur zum schnellen Ausprobieren. Wenn eine Webseite aber so langsam ihrem "fertig"-Stadium entgegenstrebt, sollten Inline-Styles zugunsten von zentralen oder externen Stylesheets verchwinden.

Ciao,
 Martin

[Sven (κ)]

Hallo Der Martin,

nicht in einem button-Element. Das hat normalerweise text-align:center.

Abgesehen davon, dass es (iirc) um das input-Element ging: Ja, das habe ich vergessen ;)

Frage: Was geht daran nicht?
Das hat Salvadore doch schon gesagt: Das padding:0 wird anscheinend ignoriert, das tatsächliche Padding scheint mit der Textlänge zu wachsen.

Desto länger der Button, desto mehr Padding? Das habe ich noch nie gesehen.

Inline Styles sind schrecklich.
Eigentlich sind sie ziemlich praktisch.
Ja, aber nur zum schnellen Ausprobieren. Wenn eine Webseite aber so langsam ihrem "fertig"-Stadium entgegenstrebt, sollten Inline-Styles zugunsten von zentralen oder externen Stylesheets verchwinden.

Nein, überhauptnicht. Es gibt Situationen, wo inline-styles ziemlich praktisch sein können. Und zwar wenn der gewünschte Stil nur an einer Stelle vorkommt oder an vielen Stellen variiert. Da sind Inline-Styles schrecklich praktisch.

Grüße,
Sven

[Salvadore]

Hi Sven!

Desto länger der Button, desto mehr Padding? Das habe ich noch nie gesehen.

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.

Jetzt verstanden?

Salvadore

[bechte]

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

[Ole]

hi Salvadore

füge deinen stylesheets "overflow: visible" hinzu.
Dann erzielst du das gewünschte ergebniss auch im IE.

so long
Ole
(8-)>