Verrutschtes Formular in verschiedenen Browsern?

Computer: Software & Programmierung HTML & CSS
#1

Hallo allerseits,
nachdem ich, an Safari arbeitend, eine Seite mit Kontaktformular so gestaltet habe wie es sein sollte, musste ich gerade telefonisch feststellen, dass das Formularfeld „E-mail“ und der Submit-Button sowohl im IE als auch bei Opera (auf Windows) seltsam nach rechts verrückt sind… Mit dem IE hatte ich ja schon gerechnet, aber bei Opera - da muss ja dann doch irgendwas falsch sein, womit Safari irgendwie besser klarkommt… Wäre nett, wenn vielleicht mal jemand die unten stehende Seite von verschiedenen Browsern aus ansieht, und falls es verrückt ist (recht leicht zu erkennen, da die Eingabefelder alle links aneinander ausgerichtet sein sollten und der Submitbutton unter „Kontaktformular“ zentriert sein sollte), mir vielleicht auch noch einen Tipp geben könnte, woran das liegt… das wäre wirklich sehr hilfreich!
Hier die Seite:
http://paramas.de/kontakt.shtml

(der Quelltext ist ja über die Seite erreichbar, brauche ihn ja sicher nicht nochmal hier einfügen, oder?)

Vielen Dank,
derjesko

#2

ch sehr hilfreich!

Hier die Seite:
http://paramas.de/kontakt.shtml

(der Quelltext ist ja über die Seite erreichbar, brauche ihn
ja sicher nicht nochmal hier einfügen, oder?)

FF und IE bemängeln diese zeile:
for (var i = 0; i

#3

Hey,
Danke für die Mühe, aber muss zugeben dass ich so sehr dann doch nicht in der Materie zu stecken scheine… Kannst du mir vielleicht noch sagen was ich jetzt damit anfange bzw. wo ich das Problem beheben kann?
Danke dir!

for (var i = 0; i

#4

Hi derjesko,

hab mal Schnappschüsse Deines Kontaktformulars mit verschiedenen Browsern gemacht.

System Windows Vista
Internet Explorer - http://www.dessau-rosslauer.de/wwwupload/up/Bilder/i…
Seamonkey - http://www.dessau-rosslauer.de/wwwupload/up/Bilder/s…
Firefox - http://www.dessau-rosslauer.de/wwwupload/up/Bilder/f…
Opera - http://www.dessau-rosslauer.de/wwwupload/up/Bilder/o…

Alle in der z.Zt. aktuellen Fassung.

Den Quellcode hab ich mir noch nicht angeschaut aber da es ein recht einfaches Formular ist empfehle ich einfach ein anderes :wink:
Fehlersuche kann sehr mühsam sein und lohnt sich hier nicht wirklich.

Gruß, der Rosslauer.de

#5

Ach du schande, das ist ja schlimmer als ich dachte! …Naja aber der Fehler ist ja sicher nicht das Formular an sich, sondern das Design… oder? Und wenn ich jetzt ein anderes Formular irgendwo hersuche, ist die Designanpassung wahrscheinlich genauso aufwendig…
Poste jetzt doch mal noch den Quelltext hier:

Kontaktformular

Ihre Nachricht:

.kontaktformular {background-color:rgb(51, 51, 153); width:330px; padding-bottom: 10px; padding-left:10px; padding-right:10px; padding-top:10px;}

#6

und hier wäre auch schon ein relativ einfaches http://www.dessau-rosslauer.de/mueritz/anfrage.php

Gruß, der Rosslauer

#7

Das Problem ist, dass ich ohne PHP auskommen muss… Was die Sache schwer einschränkt :wink:

#8

Was die Sache schwer einschränkt :wink:

allerdings das tut es :smile:

Bekommst Du keinen vernünftigen Quellcode von jotform.com oder modifizierst Du den?

#9

Hey,
Danke für die Mühe, aber muss zugeben dass ich so sehr dann
doch nicht in der Materie zu stecken scheine… Kannst du

und was sagt denn dieser Jesko Habert dazu? :smile:)
747 zeilen javascript,keine ahnung was da noch so passiert

1 . hier width erhöhen … min. 420px in der style.css

.kontaktformular {background-color:rgb(51, 51, 153); width:330px; padding-bottom: 10px; padding-left:10px; padding-right:10px; padding-top:10px;}

  1. den submit-button aus der div nehmen oder div-style ändern in der html:
#10

Hallo derjesko,

also in soweit hattest Du Recht :wink: das Design war schuld.
Habe mal etwas angepasst siehe http://www.dessau-rosslauer.de/wwwupload/up/Text/kon…

und nachfolgend der Quelltext

_Kontaktformular
.kontaktformular {background-color:rgb(51, 51, 153); width:370px; padding:10px;}
.ueberschrift {color:#CCCCCC; font-weight:bold; font-size: 1.2em; margin:10px auto; padding-bottom:10px;}
.abstand {color:#CCCCCC; font-size: 1.2em; margin:10px auto; padding:10px 0px;}

Kontaktformular

Ihre Nachricht:_

Gruß, der Rosslauer

#11

Den hab ich modifiziert, soll sich ja gestalterisch in die Seite einpassen…

#12

Erstmal danke für die Antwort… habe jetzt mal beides umgesetzt, und laut browsershots.org siehts es jetzt immerhin bei allen gleich aus und nicht ganz zerissen… Insofern schonmal gut… nur siehts natürlich nicht mehr so aus wie ich es haben wollte… Ist natürlich nicht dramatisch, aber der Button sollte ja schon unter das „Kontaktformular“… da isser jetzt natürlich nicht mehr :wink:

gruß derjesko

1 . hier width erhöhen … min. 420px in der style.css

.kontaktformular {background-color:rgb(51, 51, 153);
width:330px; padding-bottom: 10px; padding-left:10px;
padding-right:10px; padding-top:10px;}

  1. den submit-button aus der div nehmen oder div-style ändern
    in der html:
#13

Hey,
auch dir danke für die Idee :wink: - hab grade schon weiter unten den Vorschlag ausprobiert, der ähnlich aussieht. Das funktioniert dann zwar, sieht aber eben leider auch nicht mehr so aus, wie es ursprünglich sollte… das war ja durchaus gewollt dass die Überschrift („Kontaktformular“) zusammen mit dem Button im rechten Bereich neben den Absenderfeldern stand. (Einfach weil da noch gut Platz ist und das Formular dann in der Höhe nicht so viel Platz verbraucht…)
Gruß derjesko

#14

achso derjesko,

muß einem gesagt werden dass das so gewollt ist :wink:
http://www.dessau-rosslauer.de/wwwupload/up/Text/kon…

Gruß, der Rosslauer

#15

P.S.

#16

Hey Rosslauer

  • genial, genau so soll es sein :wink: Danke vielmals für die Mühe! Habe jetzt die Seite (http://paramas.de/kontakt.shtml) angepasst (bis auf die Schriftgröße von „ihre Nachricht“ eigentlich gleich wie deine Version), auch das onblur war ne gute Idee. Wenn es jetzt auf den anderen Browsern auch noch so aussieht wie es aussehen sollte, bin ich absolut glücklich :wink: (tut es das?..)
    Besten Dank!
    derjesko
#17

Wenn es jetzt auf den anderen Browsern auch noch so aussieht wie es aussehen sollte
tut es das?

Getestet mit IE8, FF3.6.2, Oera10.10 und Seamonky1.1.17 auf einem Windows-Vista, 32bit-System.
Wie das Formular unter Unix/Linux und Ableger dargestellt wird wirst wohl selbst testen müßen :wink:

Freut mich natürlich wenn´s weitergeholfen hat.

Gruß, der Rosslauer

#18

Bestens, danke dir vielmals!!! Über verschiedene Mac-Browser grade schon getestet, Linux kommt dann noch, aber das sieht doch schon sehr vielversprechend aus :wink:
Beste Grüße derjesko