Suchtextfeld

[GerhardS]

Hallo,
ich möchte ein Textfeld für eine Suche auf einer Website gestalten. Es soll so aussehen wie die Internet-Suche in Opera9 oder FF2: eine Kombination von Textfeld und Grafik. Leider bekomme ich es nicht hin, Textfeld und Grafik miteinander zu "verkleben". Ich habe bereits versucht, eine Grafik als Hintergrundbild in ein Textfeld einzufügen - leider erscheinen dann die vom Benutzer eingegebenen Zeichen über der Grafik.
In welcher Richtung muss ich nach einer Lösung suchen?

[Rinaldo]

Schau mal in diese Richtung .

[GerhardS]

Was genau bewirkt die Angabe background-image url(myimage.gif) Xpx Ypx?
Ich habe X und Y auf je 3 gesetzt - da war mein Hintergrundbild (16 x 16 px) verschwunden.
Ich habe X und Y auf je 25 gesetzt - da war mein Hintergrundbild auch verschwunden.
Ich habe X und Y auf je 10 gesetzt - da war mein Hintergrundbild auch verschwunden.
Das Textfeld selbst ist mit den Angaben width: 13em und height: 1.75em ausgezeichnet.
Ich teste mit IE 6, FF2, O9 und Safari 3.

[Rinaldo]

Hab mein Beispiel mal angepasst an die Größen, die Du willst...

Test mal mit meinen Einstellungen - die Größe des Bildes ist ja fast identisch, meine Grafik ist 15x15 Pixel.

EDIT

Ah ja, hab mir das auch in FF, IE und Opera angesehen - ohne Probleme.

[GerhardS]

Das Problem scheint wohl komplizierter zu sein. Ich sehe die Hintergrund-Grafik nur bei folgenden Einstellungen:
background-repeat: no-repeat;
background-position: left bottom;
background-color: white;
background-image: url(../images/magnify.gif);
border: 1px #000 solid;
margin: 7px;
Sobald ich die Kurzschreibung benutze , z.B.
background-image url(../images/magnify.gif) left bottom no-repeat;
, wird die Hintergrund-Grafik nicht mehr angezeigt. Dto bei:
background-image: url(../images/magnify.gif) no-repeat 2px 50%;

Morgen teste ich weiter. Gute Nacht und Danke für deine Hinweise.

[xynn]

Für die Kurzschreibweise müsste es auch so heißen:

background: url(../images/magnify.gif) #fff left bottom no-repeat;

also background, nicht background-image.

[Rinaldo]

Dafür ist mein Beispiel ja gedacht, um solche Fehler zu vermeiden .