nicht angemeldet
padding bei <input type="button">
Hi,
ich möchte einem <input type="button"> oder einem type="submit" einen padding-left zu weisen, um ihm links in den freien Bereich ein background-image zuweisen zu können, und der Text rechts davon noch zu sehen ist.
Das mache ich so:
<input type="button" style="
background-image: url(bild.jpg);
background-repeat: no-repeat;
padding: 0 0 0 150px;
background-color: transparent;
border: 0" />
Links oben wird also das Bild gesetzt, ohne repeat. Das Standardgrau mach ich transparent, und den border ganz weg.
Das Bild ist also 150px breit, der Text soll durch das padding-left nach rechts verschoben werden.
Klappt auch alles wie gewünscht im FF.
Im IE allerdings wird links und rechts vom Text immer noch Platz gelassen. Scheinbar ist das abhängig vom padding-left. Je größer dieser ist, desto größer ist auch der padding-right. Der aber auf 0 angegeben ist.
Was ich will ist also ein Button, der aussieht wie ein <input type="image"> aber mit Text, rechts vom Image.
Gibts bessere Lösungen?
Gruß
Christian
-
Gibts bessere Lösungen?
Gib dem Ganzen mal eine Breite mit z.B. so:
<input type="button" style="background-image: url(bild.jpg); background-repeat: no-repeat; padding: 0 0 0 150px; background-color: transparent; border: 0; width:150px" />
width:150px
...
-
Gibts bessere Lösungen?
Gib dem Ganzen mal eine Breite mit z.B. so:
<input type="button" style="background-image: url(bild.jpg); background-repeat: no-repeat; padding: 0 0 0 150px; background-color: transparent; border: 0; width:150px" />
width:150px
...
Geht zwar... ist aber nicht praktikabel, da man ja nicht weiß, wie groß der Text ist. Also wieviel Platz der einnimmt...
Und für jeden Button nun noch die optimale Breite herauszufinden ist nicht in meinem Sinne...
Gruß!
-
Habe es gelöst:
Man muss dem Button noch overflow: visible setzen, und width: auto (das aber wohl nur für IE 6).
Gruß!
-
-