Submit als Grafik

[Lukas Bugla]

Hallo!

Folgendes habe ich im CSS definiert:

#search input.submit
 {
     height:22px;
     width:106px;
     background:url("../images/button_search.png") 0 0 no-repeat;
     text-indent:-10000px;
     border:none;
     padding:0;
     margin-left:5px;
     cursor:pointer;
        }

Und im HTML:

<input type="submit" class="submit" value="Suchen" />

Nun wird der Button im Internet Explorer falsch dargestellt. Im IE6 sieht man ihn garnicht und im ie7 sieht man über der Grafik den value ( suchen ).

Kann mir bitte Jemand sagen wo der fehler steckt?

Vielen Dank!

Lukas

[Beat]

Kann mir bitte Jemand sagen wo der fehler steckt?

Ich traue mich nur zu antworten, weil es niemand bisher getan habe.
Mein MSIE6 ist gestorben und der MSIE 7 hat die Grippe.

Dennoch vermute ich dass text-indent auf ein Formularelement angewendet zu nicht kontrollierbaren Ergebnissen führt, vor allem bei Input des Typs Submit.

mfg Beat

[Christoph Schnauß]

hallo,

Dennoch vermute ich dass text-indent auf ein Formularelement angewendet zu nicht kontrollierbaren Ergebnissen führt, vor allem bei Input des Typs Submit.

Die Vermutung geht vermutlich in die richtige Richtung. Der angegebene Codeschnipsel ist zwar gültig (valide), allerdings ist völlig unverständlich, warum mit "text-indent:-10000px;" alles aus dem sichtbaren Bereich um eine nahezu unvorestellbare Entfernung herausgerückt werden soll.

Grüße aus Berlin

Christoph S.

[at]

Hallo.

Der angegebene Codeschnipsel ist zwar gültig (valide), allerdings ist völlig unverständlich, warum mit "text-indent:-10000px;" alles aus dem sichtbaren Bereich um eine nahezu unvorestellbare Entfernung herausgerückt werden soll.

Stimmt, es ist wirklich unverständlich, weshalb hier px statt em eingesetzt wird. Mit der derzeitigen Lösung läuft man ja Gefahr, dass bei einem zugegebenermaßen ungewöhnlich großen Schriftgrad doch noch ein Rest des value zu sehen ist. Und genau das soll ja offenbar vermieden werden.
MfG, at

[at]

Hallo.

Nun wird der Button im Internet Explorer falsch dargestellt. Im IE6 sieht man ihn garnicht und im ie7 sieht man über der Grafik den value ( suchen ).

Im IE6 sieht man ihn vermutlich deshalb nicht, weil das Hintergrundbild die Nullpunkte seiner Koordinaten am negativen Einzug orientiert, und bei der Entwicklung des IE7 hat Microsoft wohl bemerkt, dass zumindest bestimmte CSS-Eigenschften nicht auf ein Attribut wie value anzuwenden sind, weil sich diese Eigenschften ja eigentlich auf den Inhalt des Elements beziehen.

Kann mir bitte Jemand sagen wo der fehler steckt?

Im Ansatz.
MfG, at