"input"-Feld in IE<9 Cursor falsch positioniert

[ChrisPons]

Hallo,

ich bin gerade dabei, unsere HP neu zu gestalten. Ich habe sie komplett in HTML5 und CSS3 gemacht. Funktioniert in FF, Opera, Safari ohne Probleme.

Da der IE die ganzen media-abfragen nicht kann (bis IE9?) habe ich für alle einzelnen Seiten eigene CSS-Dateien angelegt (musste sein, da ich auf jeder Seite ein eigenes Hintergrundbild haben möchte). Bei zwei Seiten habe ich ein Darstellungsproblem. Es geht um die "input"-Felder bei Formularen. Angezeigt wird alles korrekt. Nur der Cursor blinkt links oberhalb (ca -3px/-3px) und läuft auch während der Eingabe mit diesem Versatz mit. Es funktioniert, aber sieht doch völlig Kac... aus.



Der Code in der CSS:

input{
	padding: 5px 5px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-radius: 4px;
	}

Wenn ich das Padding weg mache wird die Abweichung noch größer.

Wo habe ich mir den Fehler denn eingefangen?? Keine Ahnung wo ich noch suchen soll...
...bin für jeden Rat und Hinweis dankbar

 

[Myhar]

AW: "input"-Feld in IE<9 Cursor falsch positioniert

Wie wird denn das Hintergrundbild für die input Felder definiert? Es bringt hier nichts, nur das CSS für die input Felder anzugeben, der Fehler kann auch bei einem übergeordneten Element sein. Drück einmal F12, dann hast du die Webdevelopertools vom IE, damit kannst du den Fehler selber finden.
Alternativ kannst du auch das Beispiel online stellen.

BTW: Wenn man auf jeder Seite ein anderes Hintergrundbild haben möchte, dann ist dafür nicht für jede Seite eine eigene CSS Datei notwendig. Das regelt man über Klassen (bzw. IDs da es ja nur ein Bild pro Seite gibt)

 

[ChrisPons]

AW: "input"-Feld in IE<9 Cursor falsch positioniert

Danke für die schnelle Antwort. Die Seite ist zu sehen. Die Felder sind in HOTEL->RESERVIERUNG und in KONTAKT->eMAIL.

Meine Struktur ist:

body -> container mit header, content, footer

div=header div=Logo /div
div=Navigation /div
/div

div=content div=Hintergrund (gleiche Größe wie content, lädt nur Hintergrundbild)
div=Unternavigation /div

div=inhalt (dunkelt das Bild ab über rgba, in der IE-CSS per transparentem png)
div=textodertabelle (eigentliche Inhalt in eigenem div, damit ggf. unterschiedliche Inhalte dargestellt werden können (z.B. "ZIMMER" mit festem Text und scrollbarer Tabelle) /div
div=WeitererInhaltWennNötig /div
/div
/div
/div

div=footer
/div

Ja das ist mir vor lauter gar nicht in den Sinn gekommen, werde das über IDs machen. Dennoch sollte jede Seite erst mal auch so funktionieren, oder?

 

[Misco]

AW: "input"-Feld in IE<9 Cursor falsch positioniert

Der Filter:

progid:DXImageTransform.Microsoft.Shadow(Color=#F0F0F0, Strength=10, Direction=0),
            progid:DXImageTransform.Microsoft.Shadow(Color=#F0F0F0, Strength=10, Direction=90),
            progid:DXImageTransform.Microsoft.Shadow(Color=#F0F0F0, Strength=10, Direction=180),
            progid:DXImageTransform.Microsoft.Shadow(Color=#F0F0F0, Strength=10, Direction=270)

ist Schuld, wie man das fixt weiß ich nicht auf die schnelle.

 

[ChrisPons]

AW: "input"-Feld in IE<9 Cursor falsch positioniert

Hallo Misco,

vielen Dank. darauf wäre ich sicher nicht gekommen. Habe den Code mal entfernt und einen dünnen Rahmen gemacht. Nicht der Brüller aber besser der Cursor blinkt an der richtigen Stelle. Vielleicht findet sich ja noch eine Lösung, die beides ermöglicht.

 

[Misco]

AW: "input"-Feld in IE<9 Cursor falsch positioniert

Du kannst es mit CSS Box-Shadow probieren. Für die alten IE´s gibt es ein Script das per CSS geladen wird:

Bitte kostenlos registrieren, damit du die Links siehst.

Das klappt aber auch nicht in allen Designs, muss man probieren.