|
|||
Padding im Inputfeld bei Eingabe im IE.
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: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" 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> 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; } Viele Grüße Tom Geändert von TomA (22.04.2011 um 22:09 Uhr) |
Sponsored Links |
|
|||
Liegt am "Quirksmodus"
Du musst die Background-position ändern. auf 100% 0 In deinem CSS-Code sieht das dann so aus: Code:
background: url("hinter.png") no-repeat scroll 100% 0 transparent; |
Sponsored Links |
|
|||
Hallo Borsti und cebito,
vielen Dank für eure Antworten. Zunächst Borsti: CSS Code:
.test { background: url("hinter.png") no-repeat scroll 100% 0 transparent; border:0px; width:190px; height:69px; margin:0px; overflow:hidden; padding:37px 5px 3px 37px; font-size:12pt; font-weight:bold; } Funktioniert bei mir zumindest bislang nicht. Aber danke für den Ansatz und deine Mühe. Zu cebito: Zitat:
Zitat:
Ich will im Prinzip mit ":focus" arbeiten, dabei aber nicht nur das direkte INPUT-Feld ändern, sondern gleich den ganzen umgebenden Hintergrund. Das sieht so auch genauso aus, wie ich es mir wünsche, nur eben nicht, wenn man zu viele Zeichen eingibt. Aber ich will auch die maximale Zahl der Zeichen nicht festlegen. Auch Dir vielen Dank für deine Anregungen und Mühen. Viele Grüße Tom |
|
|||
Zitat:
Ich sehe gerade, das große Webseiten auch Probleme damit haben, ist mir noch gar nicht so aufgefallen Aber es bezieht sich auf das gleiche, es ist halt Quirksmode. Und gegen Quirksmode hilft in den meisten Fällen nur JS Aber im Grunde hat cebito schon Recht, die Methode macht im UI-Design eigentlich wenig Sinn, weil man dafür dann entweder Border nimmt, oder halt JS. Kannst ja mal hier schauen, ob du das Design nicht umändern willst: --> Dribbble - What are you working on? |
|
||||
Zitat:
Genau, wenn der Hintergrund einfarbig ist =>> border, wenn es ein Bild ist, wirds wohl nicht ohne JS gehen. PS.: für den Quirksmode ist übrigens dein PHP-Code vor dem Doctype verantwortlich. Du musst die Seite schon als .php nicht .html speichern, damit der Browser davon nichts mitbekommt und im Standartmodus laufen kann |
|
|||
Danke nochmal.
Das ist ja hier mehr oder weniger Grundlagenforschung. Klar im Endeffekt wird mir JS aus der Patsche helfen. Ich hatte allerdings mehr darauf gehofft, es anders lösen zu können. Interessant, dass Dribbble das Problem auch hat - und so viele andere. Ist mir auch noch nicht aufgefallen. Viele Grüße Tom |
|
|||
Zitat:
Zitat:
Zitat:
Danke nochmal Tom |
Stichwörter |
eingabe, input, internet explorer, padding, verschiebt, verschiebung |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Dynamische Größen | Killhunter | CSS | 0 | 14.05.2011 17:56 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Browser Zoom - Divs vergrößern sich nicht mit | mathias81 | CSS | 19 | 04.08.2009 09:58 |
Problem mit CSS Style | flo007 | CSS | 3 | 25.01.2009 18:08 |
Problem mit CSS in Joomla 1.5 | noobilicius | CSS | 6 | 25.09.2008 21:24 |