Buttons mit image werden falsch platziert

    Hallo,

    es ist mir ein Rätsel - trotz ewigen Googelns scheine ich der einzige zu sein, der Buttons mit Text und Grafik nebeneinander setzt. Warum verschiebt FF den Button mit der Grafik 3 Pixel nach oben? Sieht geil aus: 5 Buttons mit Text auf der gleichen Höhe und mitten drin einer mit einem Image nach oben verschoben. Wirkt total professionell ;)
    <button style="height:25px;">Neu</button><button style="height:25px;"><img src='images/dot_red.gif' border='0' /></button>
    Wer es probieren will, muss natürlich die image-source auf eine eigene kleine Grafik legen. Im Beispiel ist es nur ein Punkt.
    Kein anderer Browser unter Windows oder Linux macht das FF nach. Da ist er einzig - aber konsequent unter allen Versionen.
    Hat vielleicht jemand eine W3C-Erklärung zur Hand wieso FF Recht hat oder einen Workaround? Oder beides?
    Mit CSS-Fromatierung habe ich lange probiert aber keinen Erfolg gehabt. Vielleicht (nein, ganz sicher) gibt es da aber Gurus, die andere Ansätze haben.

    Danke für's Lesen
    Frank

    Zitat von Frankff

    Warum verschiebt FF den Button mit der Grafik 3 Pixel nach oben?

    Es müssen nicht unbedingt 3 Pixel sein. Der Betrag hängt von der Höhe des Button-Inhalts ab. Offenbar werden die Elemente alle auf der gemeinsamen Grundlinie angeordnet, und dann wird der Botton so angesetzt, dass der Inhalt zentriert erscheint.

    Zitat von Frankff

    Kein anderer Browser unter Windows oder Linux macht das FF nach.

    Opera 9 macht das auch. Ein simpler Workaround sieht so aus:

    Code
    <button style="height:25px;">&nbsp;<img src='dot.gif' />&nbsp;</button>

    Somit wird der Inhalt in der Höhe den anderen Buttons angeglichen.
    Problematisch wirds allerdings, wenn man eine Grafik nimmt, die höher als der Button (abzgl. Rand) ist. Dann funktionieren sämtliche Verkleinerungs- und Abschneidemethoden nicht (soweit ich das bisher getestet habe).

    danke für Eure Antworten - zumindest kann ich mich jetzt daran erfreuen, dass ich nicht nur depp bin.
    Leider muss die Grafik 12 Pixel niedriger sein, als der Button, damit die Lösung von Pumbaa80 funktioniert, auch wenn sämtliche Ränder auf Null gesetzt werden. (border, margin, padding: alles 0)
    Damit scheidet das als Lösung für mein Design aus. Müssen die FF-User eben damit leben, dass ihr Browser auch einen Fehler hat ;)

    Grüße
    Frank

    Zitat von JonHa

    Ein Workaround könnte sein, ein Hintergrundbild statt des <img> zu verwenden...

    Das liefert leider nicht das gewünschte Resultat.
    [Blockierte Grafik: http://img269.imageshack.us/img269/9999/buttongi3.png]

    Weitere Möglichkeit: in jeden Button Text und Bild einbauen:

    Code
    <button style="height:25px;">
         <img src="pixel.gif" style="width:0px; height:12px;"/>
         Neu
      </button>
      <button style="height:25px;">
         &nbsp;
         <img src="pixel.gif" style="width:12px; height:12px;"/>
         &nbsp;
      </button>


    Edit: ich sehe gerade, dass das mit Opera nicht funktioniert. Die Angabe width:0px; wird nicht unterstützt. Es bleibt noch die etwas umständliche Variante: eine vollständig transparente .gif-Grafik mit Breite 1px und Höhe der Referenzgrafik erstellen und entsprechend einbinden. Das sollte dann aber wirklich in allen Browsern funktionieren.

    Danke, Pumbaa80. Aber irgendwo ist dann auch Schluss mit meinen Anstrengungen, jedem Browserbug hinterherzulaufen. Sonst hören die Browserbauer einfach auf, ihre Fehler zu beseitigen - die Webdesigner werden es schon richten ...
    Also, danke noch mal.

    Frank