✔ Textfeld Background

[Vectormaster]

Guten Abend,

ich hab grad ein Problem und komm seit ca. 1ner Stunde nicht mehr weiter. Mein Problem:

Ich habe oben auf einer Seite ein Suchfeld. Es besteht aus einem Textfeld und einem Button. Jedem Element habe ich via CSS ein Hintergrundbild zugewiesen. Wenn ich jetzt im IE über 14 Zeichen eingebe, schiebt sich das Hintergrund Bild weg. Im Firefox gibt es dieses Problem nicht. Ich habe zur Verdeutlichung noch mal 2 Screenshots angehängt.
CSS des Textfeldes:

width:140px;
padding:4px 0px 6px 6px;
overflow:hidden;
color:#FFF;
border: 0px none;
background:url(../images/default/search/search_field.png) no-repeat;

Was mach ich falsch Wie schaffe ich es, dass das Bild “stehen bleibt”

 

[Maik]

Hi,

da wird wohl nur das Fixieren des Hintergrundbildes weiterhelfen:

background:url(../images/default/search/search_field.png) no-repeat fixed;

mfg Maik

 

[Vectormaster]

Hi, jetz ist das Bild weg...

 

[Maik]

Das würd ich so nicht sagen; durch die Fixierung ist das Hintergrundbild nun im Anzeigebereich des Elements nach links und oben verschoben.

Abhilfe schafft hier in diesem Fall dieses Konstrukt:

<div class="wrapper"><input type="text"></div>

.wrapper {
float:left;
width:140px;
padding:4px 0px 6px 6px;
overflow:hidden;
background:url(../images/default/search/search_field.png) no-repeat;
}
input[type=text] {
color:#fff;
border:none;
background:transparent;
}

mfg Maik

 

[Vectormaster]

Hi, nun funktioniert es perfekt. Danke!