Opera: Formular-Formatierungsprobleme

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

habe bei einem Kontaktformular folgendes Problem:

Im Opera (Version 9) wird, sobald ich in ein Textfeld klicke, die Rahmenfarbe vom Absende-Button nicht mehr angezeigt. Außerdem zeigt er trotz overflow:auto einen Geisterscrollbalken an.

Kann mir jemand einen Tip geben, wie ich das beheben kann?

Quellcode des Formulars:

Name: *

eMail: *

Telefon:

Betreff:

Nachricht: *

Kopie der Nachricht an Ihre Adresse senden
* Bitte diese Felder unbedingt ausfüllen

relevantes CSS:

.formtext {
 padding-top:8px;
 vertical-align:top;
 width:90px;
 height:22px;
 float:left;
}

input.text, textarea {
 color:#FFFFFF;
 border:1px solid #CC9966;
 padding:3px;
 margin:5px 0px;
 background-color:#000000;
 overflow:auto;
}

input.button {
 color:#FFFFFF;
 background-color:#000000;
 border:1px solid #00CCFF;
 padding:3px;
 margin:3px;
}

input.button:hover {
 color:#00CCFF;
}

select.text:hover, input.text:hover, textarea:hover{
 border:1px solid #00CCFF;
 color:#00CCFF;
}

select.text:focus, input.text:focus, textarea:focus{
 border:1px solid #FFFFFF;
 color:#FFFFFF;
}

Link zur Seite:
http://www.kerstinheinzel.de/dickewied/docs/kontakt.php

komplettes CSS:
http://www.kerstinheinzel.de/dickewied/css/styles.css

Vielen Dank im voraus!

Kerstin

#2

Hallo Kerstin,

habe bei einem Kontaktformular folgendes Problem:

Im Opera (Version 9) wird, sobald ich in ein Textfeld klicke,
die Rahmenfarbe vom Absende-Button nicht mehr angezeigt.
Außerdem zeigt er trotz overflow:auto einen
Geisterscrollbalken an.

Ich kann dein Problem mit den Geisterscrollbalken im Opera9 nicht nachvollziehen, wohl aber Im IE7 und im IE6, wenn ich den DOCTYPE weglasse, mich also im sogenannten Quirksmode befinde. Dann kommen die Geisterscrollbalken bei den INPUT-Elementen.

Das kommt aber überhaupt erst durch die Angabe overflow:auto! Lässt man diese oder das vertikale Padding bei den INPUT-Elementen weg, gibt es auch im IE kein Problem!

Gruß Gernot

#3

Hallo Gernot,

Ich kann dein Problem mit den Geisterscrollbalken im Opera9
nicht nachvollziehen, wohl aber Im IE7 und im IE6, wenn ich
den DOCTYPE weglasse, mich also im sogenannten Quirksmode
befinde. Dann kommen die Geisterscrollbalken bei den
INPUT-Elementen.

Also im Opera sieht es bei mir so aus:
http://www.kerstinheinzel.de/dickewied/images/opera.gif

Der Geisterscrollbalken ist in der Textarea und da ich in das Feld „Name“ geklickt habe, verschwindet der Rahmen um den Absende-Button.

Außerdem: warum den Doctype weglassen? Ist klar, daß man sich dann im Quirksmode befindet.

Das kommt aber überhaupt erst durch die Angabe overflow:auto!
Lässt man diese oder das vertikale Padding bei den
INPUT-Elementen weg, gibt es auch im IE kein Problem!

Durch overflow:auto wird der Geisterscrollbalken (zumindest im IE) ausgeblendet.

Sorry, aber ich verstehe jetzt nicht so ganz, was Du mir mit diesem Kommentar sagen wolltest…

Kerstin

#4

Hallo Kerstin,

Also im Opera sieht es bei mir so aus:
http://www.kerstinheinzel.de/dickewied/images/opera.gif

Bei mir tritt das Problem nicht auf; ich habe übrigens Opera Version 9.27 unter Windows XP und du?

Der Geisterscrollbalken ist in der Textarea und da ich in das
Feld „Name“ geklickt habe, verschwindet der Rahmen um den
Absende-Button.

Außerdem: warum den Doctype weglassen? Ist klar, daß man sich
dann im Quirksmode befindet.

Ja das sollte man nur im äußersten Notfall machen, weil man sich mit dem Quirksmodus natürlich auch noch viele andere Probleme einhandelt!

Das kommt aber überhaupt erst durch die Angabe overflow:auto!
Lässt man diese oder das vertikale Padding bei den
INPUT-Elementen weg, gibt es auch im IE kein Problem!

Durch overflow:auto wird der Geisterscrollbalken (zumindest im
IE) ausgeblendet.

Sorry, aber ich verstehe jetzt nicht so ganz, was Du mir mit
diesem Kommentar sagen wolltest…

Das war eine Feststellung kein Kommentar, durch overflow:auto wird der Geisterscrollbalken in der Textarea im IE zwar ausgeblendet, erscheint dafür aber überhaupt erst bei den INPUT-Elementen, sobald du diesen auch noch ein vertikales Padding gibst, also wie bei dir „padding:3px;“ statt „padding:0 3px;“

Hast du es mal versucht, indem du deinen INPUT-Elementen font-size:1em; verpasst? Allerdings solltest du deinen DIV-Elementen der Klasse „formtext“ dann auch noch ein „clear:left;“ geben!

Gruß Gernot

#5

Hallo Gernot,

Bei mir tritt das Problem nicht auf; ich habe übrigens Opera
Version 9.27 unter Windows XP und du?

Opera 9.26 / Windows XP

Ja das sollte man nur im äußersten Notfall machen, weil man
sich mit dem Quirksmodus natürlich auch noch viele andere
Probleme einhandelt!

Eben, deswegen hab ich auch nicht verstanden, was Du mir damit sagen wolltest :wink:

Das war eine Feststellung kein Kommentar, durch overflow:auto
wird der Geisterscrollbalken in der Textarea im IE zwar
ausgeblendet, erscheint dafür aber überhaupt erst bei den
INPUT-Elementen, sobald du diesen auch noch ein vertikales
Padding gibst, also wie bei dir „padding:3px;“ statt
„padding:0 3px;“

Der Geisterscrollbalken ist doch aber nicht bei den Input-Elementen sondern nur in der Textarea. Das padding habe ich auf 3px gesetzt, da sonst der Rahmen direkt an den Text heranreicht. Das sieht beim besten Willen nicht gut aus.

Hast du es mal versucht, indem du deinen INPUT-Elementen
font-size:1em; verpasst? Allerdings solltest du deinen
DIV-Elementen der Klasse „formtext“ dann auch noch ein
„clear:left;“ geben!

Hilft leider nichts…

Kerstin

#6

Hallo Kerstin,

Bei mir tritt das Problem nicht auf; ich habe übrigens Opera
Version 9.27 unter Windows XP und du?

Opera 9.26 / Windows XP

Dann aktaulisiere mal die Version. Ich hatte übrigens auch den klassischen Windows-Stil eingestellt, ebenso wie den XP-Stil (über „Eigenschaften” bei Rechtsklick auf den Desktop änderbar) Aber ich kann mit meiner Opera-Version dein Problem in keinem der beiden Fälle nachstellen.

Ja das sollte man nur im äußersten Notfall machen, weil man
sich mit dem Quirksmodus natürlich auch noch viele andere
Probleme einhandelt!

Eben, deswegen hab ich auch nicht verstanden, was Du mir damit
sagen wolltest :wink:

Ganz einfach! Ich wollte wissen, ob sich das Problem im Quirksmode nachstellen lässt, denn manchmal gibt es ja auch andere Umstände als defekte DOCTYPES, die den Quirksmode auslösen. Im IE6 z.B. ein XML-Prolog vor dem DOCTYPE oder dort wie im IE7 ein HTML-Kommmentar davor.

Der Geisterscrollbalken ist doch aber nicht bei den
Input-Elementen sondern nur in der Textarea. Das padding habe
ich auf 3px gesetzt, da sonst der Rahmen direkt an den Text
heranreicht. Das sieht beim besten Willen nicht gut aus.

Doch bei mir erscheinen Geisterscrollbalken im IE7 und 6 in den INPUT-Elementen, wenn du vertikales Padding und gleichzeitig Overflow:auto hast!

Hast du es mal versucht, indem du deinen INPUT-Elementen
font-size:1em; verpasst? Allerdings solltest du deinen
DIV-Elementen der Klasse „formtext“ dann auch noch ein
„clear:left;“ geben!

Hilft leider nichts…

Hilft vielleicht ein zusätzliches position:relative und eine gesetzte height in Pixelb bei den INPUT-Elementen? Sonst weiß ich auch keinen anderen Rat als den Opera zu aktualisieren.

Gruß Gernot

#7

Hallo Gernot,

Dann aktaulisiere mal die Version. Ich hatte übrigens auch den
klassischen Windows-Stil eingestellt, ebenso wie den XP-Stil
(über „Eigenschaften” bei Rechtsklick auf den Desktop
änderbar) Aber ich kann mit meiner Opera-Version dein Problem
in keinem der beiden Fälle nachstellen.

Hab die Version aktualisiert und ebenfalls auf klassischen Windows-Stil gewechselt bzw. XP-Stil, Problem bleibt.

Doch bei mir erscheinen Geisterscrollbalken im IE7 und 6 in
den INPUT-Elementen, wenn du vertikales Padding und
gleichzeitig Overflow:auto hast!

Das ist mehr als merkwürdig, ich habe weder im IE6 noch IE7 einen Geisterscrollbalken…

Hilft vielleicht ein zusätzliches position:relative und eine
gesetzte height in Pixelb bei den INPUT-Elementen? Sonst weiß
ich auch keinen anderen Rat als den Opera zu aktualisieren.

Wenn ich den Input-Elementen eine feste Höhe gebe, dann sehe ich im IE auch einen Geisterscrollbalken, aber nur dann. Und wie gesagt, Opera ist aktualisiert, Problem bleibt!?!

Hab mir die Internetseite inzwischen auf 4 verschiedenen Rechnern angesehen, überall die gleichen, von mir beschriebenen Anzeigeprobleme.

Kerstin