zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Padding im Inputfeld bei Eingabe im IE.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.04.2011, 20:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2011
Beiträge: 4
TomA befindet sich auf einem aufstrebenden Ast
Standard 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>
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

Geändert von TomA (22.04.2011 um 21:09 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.04.2011, 21:34
ofHouse
XHTMLforum-Mitglied
 
Registriert seit: 20.04.2011
Beiträge: 128
Borsti befindet sich auf einem aufstrebenden Ast
Standard

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;
__________________
LG f

@ofhouse
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.04.2011, 21:37
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von TomA Beitrag anzeigen
Ich könnte es zwar im Prinzip anders machen, aber ich bin Perfektionist
Dann mach es anders, und lass das Eingabefeld einfach Eingabefeld sein und umgib es mit einer Form.
Zitat:
Zitat von TomA Beitrag anzeigen
Darüber hinaus wäre dies hier deutlich schöner und effektiver.
Was wäre jetzt unschön, uneffektiv oder gar falsch daran o.g. Form diesen Hintergrund und entsprechende Werte zu geben?
Mit Zitat antworten
  #4 (permalink)  
Alt 22.04.2011, 21:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2011
Beiträge: 4
TomA befindet sich auf einem aufstrebenden Ast
Standard

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;
	  }
Beispiel 2

Funktioniert bei mir zumindest bislang nicht. Aber danke für den Ansatz und deine Mühe.

Zu cebito:

Zitat:
Dann mach es anders, und lass das Eingabefeld einfach Eingabefeld sein und umgib es mit einer Form.
Das ist ja das Problem mit dem Perfektionismus.

Zitat:
Was wäre jetzt unschön, uneffektiv oder gar falsch daran o.g. Form diesen Hintergrund und entsprechende Werte zu geben?
Der Hintergrund ist im Beispiel ja nur, wie der Name schon sagt, ein Beispiel. Um es so zu machen, wie ich es möchte müsste ich sonst JS verwenden, am Besten sogar JQuery und das ergäbe für mich nur Sinn, wenn ich keine Alternative finde.

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
Mit Zitat antworten
  #5 (permalink)  
Alt 22.04.2011, 22:32
ofHouse
XHTMLforum-Mitglied
 
Registriert seit: 20.04.2011
Beiträge: 128
Borsti befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von TomA Beitrag anzeigen
Funktioniert bei mir zumindest bislang nicht. Aber danke für den Ansatz und deine Mühe.
Stimmt, funktioniert nicht, weil ich das Problem auf das scrolling des Hintergrundes im IE 6/7 bezogen hatte, nicht auf das Padding Problem, sry

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?
__________________
LG f

@ofhouse
Mit Zitat antworten
  #6 (permalink)  
Alt 22.04.2011, 22:46
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von TomA Beitrag anzeigen
Ich will im Prinzip mit ":focus" arbeiten, dabei aber nicht nur das direkte INPUT-Feld ändern, sondern gleich den ganzen umgebenden Hintergrund.
Und warum sagst du das nicht gleich?
Zitat:
Zitat von Borsti Beitrag anzeigen
weil man dafür dann entweder Border nimmt, oder halt JS.
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
Mit Zitat antworten
  #7 (permalink)  
Alt 22.04.2011, 22:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2011
Beiträge: 4
TomA befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 22.04.2011, 22:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2011
Beiträge: 4
TomA befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Und warum sagst du das nicht gleich?
Weil ich generell davon ausging (und auch weiterhin gehe), dass es nicht relevant ist, warum ich etwas will.

Zitat:
(...) wenn der Hintergrund einfarbig ist =>> border, wenn es ein Bild ist, wirds wohl nicht ohne JS gehen.
So siehts wohl aus, wenn nicht noch jemand mit einer bahnbrechenden anderen Idee kommt..

Zitat:
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
Ja, das ist richtig, man sollte seine Beispieldateien nicht einfach umspeichern und vergessen, dass man vorher etwas mit PHP gemacht hat. Soviel zum Thema "Perfektionismus".

Danke nochmal

Tom
Mit Zitat antworten
Antwort

Stichwörter
eingabe, input, internet explorer, padding, verschiebt, verschiebung

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Dynamische Größen Killhunter CSS 0 14.05.2011 16:56
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 16:53
Browser Zoom - Divs vergrößern sich nicht mit mathias81 CSS 19 04.08.2009 08:58
Problem mit CSS Style flo007 CSS 3 25.01.2009 17:08
Problem mit CSS in Joomla 1.5 noobilicius CSS 6 25.09.2008 20:24


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:47 Uhr.