✔ Submit Grafik verschwindet im IE

Denniz

Denniz

Erfahrenes Mitglied
Hi Leute,

ich habe ein Login Formular.
Dort gibt ein Submitbutton. In der html ist dieser mit einem value Wert belegt:

Code: 
<input type="submit" value="Login" class="submit" />

Jetz verschiebe ich den text per text-indent so das nur die Buttongrafik sichtbar ist. Im FF klappt es aber im IE >= 6 wird der Text + Grafik verschoben.
Kann man dem mit css entgegenwirken ohne die HTML zu ändern?
 
Hi,

deine Aussage (IE >= 6) muß hier etwas relativiert werden, denn im IE8 ist das Hintergrundbild sichtbar.

Die übrigen IE-Versionen verschieben nicht nur den Inhalt des value-Attributs und das Hintergrundbild, sondern das komplette <input>-Element.

Dies erkennst du, wenn du zwischendurch den Rahmen wieder aktivierst, und den text-indent-Wert soweit verkleinerst, damit es sich im Viewport des Browsers abspielt, z.B. mit text-indent:-5em.

Da sie sich beispielsweise von einer absoluten Positionierung nicht beeindrucken lassen, sehe ich hier derzeit leider keine Lösungsmöglichkeit, denn selbst mit http://code.google.com/p/ie7-js/ konnte ich kein erfolgreiches Resultat verbuchen.

mfg Maik
 
Ja, du hast recht, im IE8 geht es. :suspekt:

Problem an der Sache ist einfach das es ein T3 Login Plugin ist das aus einem statischen HTML Template gerendert wird.
Ich wollte mein Template nicht jedesmal aufs neue ändern wenn zb statt ein Grafikbutton ein einfacher HTML Button angezeigt werden soll. :D
 
Der Notnagel wäre wohl der Verzicht auf den Inhalt des value-Attributs.

mfg Maik
 
Ja, aber das dumme daran wäre nur das man dann kein Labeltext wie zb. 'Login' oder 'Senden' auf dem Submitbutton hat wenn keine Grafik eingesetzt wird, oder?
 
Dann bleibt dir wohl im Code ein Umbau nicht erspart - daher auch der unglückliche Notnagel ;-)

Entweder mit dem <button>-Element, oder beispielsweise auf diese Art:
HTML: 
<a href="" class="submit"><input type="submit" value="Login"  /></a>
CSS: 
/*Send Btn */
#login-formular  a.submit {
        display:block;
        width:23px;
        height:16px;
        text-decoration:none;
        background: url(img/loginbox_arrows.gif) no-repeat 0 0;
        margin:10px 0 0 0;
        margin-left:205px;
}
#login-formular  a.submit input {
        cursor:pointer;
        text-indent:-999em;
        background:transparent;
        border: 0px;
}


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück