Button-Tag mit eigenem Bild (image.jpg)

[molily]

Hallo, Stefan,

Kann mir jemand verraten, warum Mozilla 1.2.1 das Bild nicht ganz
links oben auf den Button setzt?

Ich kann es nicht erklären, aber mehr oder weniger ist es sinnvoll, ein Button immer wie ein Button aussehen zu lassen. Das Sichtbare ist übrigens die Hintergrundfarbe des Buttons, mit background-color:transparent könnte man sie schon einmal durchsichtig machen, dennoch nimmt dieser Rand Raum ein.

Im Beispiel hast du img und button dieselbe Größe gegeben, dadurch konntest du das Problem nur links und oben beobachten, da der Rand rechts und unten abgeschnitten wurde und damit auch das Bild. Wenn man die Größe des Buttons automatisch durch die Bildgröße bestimmen lässt, zeigt sich das Problem an allen vier Seiten und scheinbar links und rechts stärker.
Das Zuschneiden beziehungsweise Gleichsetzen der Größen geht wie du sagtest MSIE und Opera problemlos, ohne das würden auch Opera und MSIE die zusätzlich Ränder anzeigen, welche weder margin, padding noch border des button-Elements sind. Alleinig Mozilla schneidet »falsch« ab, wobei dies für mich das einzig Logische ist, womöglich ist es auch W3C-konform, sofern überhaupt ein eindeutiger Standard (=Recommendation) diesbezüglich existiert. Denn mit MSIEs und Operas Verhalten wäre nämlich dem einzigen mir erdenklichen Sinn, ein Button immer wie ein Button anzuzeigen, unabhängig davon, was der Autor als border definiert hat, auch nicht Genüge getan.

Ich dachte daran, negative Ränder für die Grafik anzugeben und diese nur Mozilla vorzusetzen:

button, button img {
border:none;
margin:0; padding:0;
background-color:green; /* Nur zur Verdeutlichung, kann man transparent setzen oder gar nicht. */
height:100px; width:100px; /* Die Bildgröße. */
}
html:root button img { /* Selektor verwenden, den nur Mozilla versteht. */
vertical-align:bottom; /* Wichtig, siehe http://www.dodabo.de/html%2Bcss/img-table/ */
margin:-3px 0 0 -3px; /* Negative Ränder, die Pixelanzahl variiert komischerweise, manchmal reicht auch margin-top:2px :-| */
}

Abgesehen, dass es hilfreich wäre, ein Button immer wie ein Button anzuzeigen, ist dieser Innenabstand scheinbar nötig, damit beim Auswählen zwischen dem Inhalt des button-Elements und dem padding ein gestrichelter Auswahlrahmen angezeigt werden kann .Im Mozilla ist es nämlich nicht mehr ersichtlich (das heißt, es wird nicht mehr visuell angezeigt), dass das Feld angewählt ist, wenn dieser zusätzliche Innenrahmen deaktiviert ist.

Die Aufteilung von links wäre ungefähr:

margin-border-padding-[optionaler gestrichelter Auswahlrahmen]-[mysteriöser und nerviger Platz zwischen dem Auswahlrahmen bzw. padding und dem Inhalt]-{...Inhalt...}

Beim Anwählen des Buttons wird das »Shiften«, das heißt, der Eindrückeffekt, im Mozilla über das padding gelöst, im MSIE aber über diesen zusätzlichen Innenabstand, weshalb trotz padding:0 im IE dennoch dieser Abstand beim Klicken auf den Button vergrößert wird. Angenommen, die linke obere Ecke eines Buttons sieht in zehnfacher Vergrößerung folgendermaßen aus:

<img src="http://home.t-online.de/home/dj5nu/fanhost/button.png" border="0" alt="">

Alles Sichtbare ist Teil der Grafik, und zwar ist diese eine rote Fläche mit einpixligem blauen Rand, das heißt mit oben genannten Tricks wird ausschließlich die Grafik als Button angezeigt.

Wenn dieses Button nun fokussiert wird (mit der Tabulator-Taste), sieht er im MSIE so aus:

<img src="http://home.t-online.de/home/dj5nu/fanhost/button-focus-ie.png" border="0" alt="">

Im Mozilla jedoch weiterhin:

<img src="http://home.t-online.de/home/dj5nu/fanhost/button-focus-moz.png" border="0" alt="">

Beim Klicken auf den Button sieht er im MSIE folgendermaßen aus:

<img src="http://home.t-online.de/home/dj5nu/fanhost/button-clicked-ie.png" border="0" alt="">

Im Mozilla jedoch weiterhin (ja, man ahnt es):

<img src="http://home.t-online.de/home/dj5nu/fanhost/button-clicked-moz.png" border="0" alt="">

Lustigerweise malt der Internet Explorer im Inhalt des button-Elements herum, der zusätzlichen Innenrahmen wird wie gesagt vergrößert beim Klicken, der Auswahlrahmen wird über dem Inhalt gezeichnet.

Ich habe nur eine Erklärung, nämlich keine allgemeingültige, da es keine zu geben scheint. Formularelemente und speziell Buttons sind generated content, das heißt sie müssen nicht mit dem CSS-Boxmodell »erklärbar« im Sinne von optisch eins zu eins nachbildbar und voll formatierbar sein.

Im MSIE 6.0 SP1 und Opera 7.0 PR1 funktioniert es wie gewünscht.

Ja. Zudem kann Opera 7 den Selektor nicht, womit der »Hack« vorerst weiterhin nutzbar ist, um IE, Opera und Mozilla unterschiedliche Styles zu liefern.

Grüße,
Mathias