Hallo,
dies ist mein erster Beitrag in diesem Forum und ich habe natürlich vorher schon ausführlich gesucht (nicht nur hier, sondern auch andernorts).
Mein Problem ist das folgende:
Ich möchte ein INPUT-Feld mit einem Hintergrundbild versehen, auf dem ein weißer Bereich zu sehen ist, der den Eingabebereich darstellt. Daher verwende ich "padding" um den Cursor also an die richtige stelle zu setzen.
Soweit funktioniert das auch.
Wenn ich nun Text eingebe ist es wunderbar, bis das Ende des Eingabefeldes erreicht ist. Tippe ich weiter, passiert folgendes:
Im IE(8, da Windows XP), schiebt sich der Text links über das von mir gezeichnete Eingabefeld und immer weiter, mein "padding" wird also ignoriert. Lasse ich das Attribut "fixed" bei "background" weg, schiebt sich das Bild mit hinaus, bzw. wird "repeat"et.
Im FF(4) funktioniert es perfekt.
Anzusehen hier: Beispiel
Ich verwende folgenden Quelltext:
HTML:
CSS
Vielen Dank für eure Mühen. Ich könnte es zwar im Prinzip anders machen, aber ich bin Perfektionist und soetwas ärgert mich. Darüber hinaus wäre dies hier deutlich schöner und effektiver.
Viele Grüße
Tom
dies ist mein erster Beitrag in diesem Forum und ich habe natürlich vorher schon ausführlich gesucht (nicht nur hier, sondern auch andernorts).
Mein Problem ist das folgende:
Ich möchte ein INPUT-Feld mit einem Hintergrundbild versehen, auf dem ein weißer Bereich zu sehen ist, der den Eingabebereich darstellt. Daher verwende ich "padding" um den Cursor also an die richtige stelle zu setzen.
Soweit funktioniert das auch.
Wenn ich nun Text eingebe ist es wunderbar, bis das Ende des Eingabefeldes erreicht ist. Tippe ich weiter, passiert folgendes:
Im IE(8, da Windows XP), schiebt sich der Text links über das von mir gezeichnete Eingabefeld und immer weiter, mein "padding" wird also ignoriert. Lasse ich das Attribut "fixed" bei "background" weg, schiebt sich das Bild mit hinaus, bzw. wird "repeat"et.
Im FF(4) funktioniert es perfekt.
Anzusehen hier: Beispiel
Ich verwende folgenden Quelltext:
HTML:
Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"]XHTML namespace[/URL]" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="all" type="text/css" href="style.css" />
<title>Input mit padding</title>
</head>
<body>
<input type="text" class="test" />
</body>
</html>CSS
Code:
.test {
background:url(hinter.png) fixed no-repeat;
border:0px;
width:190px;
height:69px;
margin:0px;
overflow:hidden;
padding:37px 5px 3px 37px;
font-size:12pt;
font-weight:bold;
}Vielen Dank für eure Mühen. Ich könnte es zwar im Prinzip anders machen, aber ich bin Perfektionist und soetwas ärgert mich. Darüber hinaus wäre dies hier deutlich schöner und effektiver.
Viele Grüße
Tom
