[Ceptic]

Hallo Leute,

ich bin in diesem Forum schon etwas länger angemeldet, habe mit der Eröffnung eines Frage-Threads bisher aber immer darauf gewartet, dass ich eine Frage finde, zu der ich mir selber keine klare Lösung erarbeiten kann. Wenn mir jemand eine genaue Lösung, oder auch einen einfacheren Alternativweg vorschlagen kann, wäre ich schon sehr dankbar.

Das Problem:
Ich bin noch relativ frisch auf dem Gebiet HTML/CSS. Vor knapp einem Jahr habe ich mir eine eigene Webseite eingerichtet, um mich selbst und meine Arbeiten vorzustellen. Diese funktioniert auch, nach meiner eigenen Meinung, ganz gut - wäre da nicht immer das gleiche Problem meines Kontaktformulars: Die Eingabefelder sind rahmenlos unsichtbar. Unter ihnen befinden sich selbstentworfene Textrahmen, die ich einfach als Grafiken darunter gelegt habe. Je nach Browser unterscheiden sich aber alle Positionierungen, sodass manche Eingabefelder aus dem Rahmen herausragen, oder die Grafiken zu weit oben/unten positioniert sind (bisher habe ich die Grafiken mit absolute positioniert). Dies unterscheidet sich sogar nicht nur von den verwendeten Browsern, sondern auch von den verwendeten Betriebssystemen. Windows' Firefox stellt mir alles schön richtig dar, während Firefox auf einem Mac irgendwelche Zeilengrößen anders zu interpretieren scheint.
Meine bisherige Lösung war es haufenweise Browserweichen zu bauen. Durch Browsershots.org habe ich aber festgestellt, dass meine Kontaktseite auf so ziemlich allen Browsern falsch dargestellt wird (auch wenn die wohl wichtigsten funktonieren).
Ich denke, wenn ich die Grafiken automatisch unter die einzelnen Zeilen des Eingabeformulares legen könnte, dürfte ich der Lösung schon einen großen Schritt näher kommen. Habe mit Div's und relativer Positionierung herumexperimentiert, aber irgendwie hat nichts wirklich funktioniert...

Dies ist mein Problemkind
Durch meine bisherigen Browserweichen funktioniert es bereits mit folgenden Browsern:

Firefox (nur Windows)
IE 8 + 9 (nur Windows)
Safari (nur Mac)
iPod/iPhone

Da ich daran arbeite mein gesamtes Portfolio online stellen zu können und es auch einigermaßen professionell zu präsentieren, wäre ein einwandfreies Funktionieren des Formulars auf allen Systemen sehr wichtig. Für sämtliche Lösungsvorschläge bedanke ich mich jetzt schon herzlich.

Mit freundlichen Grüßen,
Ceptic

[edit:] So sollte es übrigens im Normalfall aussehen:


Uploaded with ImageShack.us

[fyll]

Ich würde die Grafiken halt nicht frei extra absolut positionieren, wies bei dir gerade hinpasst.
Bei unterschiedlichen Schriftarten und -größen liegt das Formular ja auch an anderen Stellen.
Fügs halt als Hintergrundbild des Eingabefeldes ein

[Ceptic]

Danke schon mal für die Antwort.
Wenn ich die Grafiken als Hintergrund einfüge werden die Grafiken aber doch zusammengedrückt, oder? Mir wäre es lieb, wenn die eingetippten Zeichen noch genügend Abstand zum Rand hätten. Oder würden die Grafiken über das Eingabefeld hinauslaufen können?

Über deinen zweiten Vorschlag müsste ich mich noch informieren. Wenn das aber funktionieren sollte, würde ich eine Alternativmöglichkeit sehen einfach diese Variante zu wählen und dann eben eine Browserweiche für den IE zu verwenden - könnte mir vorstellen, dass mir das insgesamt weniger Mühe machen würde.

Auf jeden Fall schon mal besten Dank!

[fyll]

[Ceptic]

Prima, Danke! Die Grafik als Hintergrund einzufügen hat gut geklappt. Musste jetzt zwar wieder dutzende padding- und margin-Befehle verwenden, sowie die line-height definieren, aber nun sollte es eigentlich in allen Browsern klappen. Werde das Ergebnis gleich hochladen und mit Browsershots-org mal probieren wie es bei den anderen Browsern so aussieht...

Ceptic

[Ceptic]

Im Prinzip klappt es nun etwas besser, doch Internet Explorer und Chrome machen wieder ihre eigenen Spielchen und um wenige Pixel überschneiden sich die Textfelder mit den Grafiken wieder. Aber immerhin ist es nun nicht mehr so schlimm wie vorher, doch um ein paar Browserweichen komme ich wohl doch nicht herum.

Leider kann ich die Seite derzeit mit keinem Mac öffnen. Könnte mir jemand damit einen Screenshot hochladen? Firefox/Chrome oder Safari würde mir schon reichen.

Besten Dank!
Ceptic