Ungewollte Abstände bei Formularelementen

[Marco]

Hallo!

Ich habe ein Problem mit meinem Seitenlayout - mein Kontaktformular betreffend: Meine Form-Elemente sind zur Positionierung in div-tags eingeschlossen und nun macht der Internet Explorer sowohl vor als auch nach dem Element einen mehrere Pixel breiten Abstand (also zwischen div-Rand und Element).
Gibt es dafür eine Erklärung und kann man das irgendwie ändern? Hab's schon mit margin und padding versucht aber das klappt scheinbar nicht.

Danke für alle Antworten und noch einen schönen Tag!

Marco

[Marc Reichelt]

Hallo Marco,

Ich habe ein Problem mit meinem Seitenlayout - mein Kontaktformular betreffend: Meine Form-Elemente sind zur Positionierung in div-tags eingeschlossen und nun macht der Internet Explorer sowohl vor als auch nach dem Element einen mehrere Pixel breiten Abstand (also zwischen div-Rand und Element).
Gibt es dafür eine Erklärung und kann man das irgendwie ändern? Hab's schon mit margin und padding versucht aber das klappt scheinbar nicht.

Vermutlich sind dort Leerzeichen. Zu Leerzeichen gehören natürlich auch Zeilenumbrüche.

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[Marco]

Hi Marc,

Vermutlich sind dort Leerzeichen. Zu Leerzeichen gehören natürlich auch Zeilenumbrüche.

Danke für den Hinweis aber im Firefox gibt es keine Abstände und im Quelltext hab ich zwischen <div> und <input> bzw. <textarea> auch keine Leerzeichen. Daher ist es meiner Meinung nach eine Fehlinterpretation des IE. Hab leider keine andere Erklärung dafür.

Gruß Marco

[Marco]

So, hier mal ein Ausschnitt aus dem Quellcode:

<div id="c1">Vorname:</div>
<div id="c2"><input type="text" id="contact" name="vorname" value=""></div>

<div id="c3">Name:</div>
<div id="c2"><input type="text" id="contact" name="name" value=""></div>

<div id="c1">Betreff:</div>
<div id="c2"><input type="text" id="contact" style="width:420px" name="betreff" value=""></div>

Dabei ist in id="contact" eine Länge von 170px deklariert, und 'c3' hat eine Länge von 80px - daraus ergibt sich, wenn 'vorname' und 'nachname' nebeneinander und 'betreff' darunter stehen soll (Feld gleich lang) eine Länge für 'betreff' von 420px. Klappt im FF und Opera wunderbar, nur IE macht vor und nach den Eingabefeldern stets Abstände, wodurch sich alles verzerrt. Hier mal eine Skizze:

Vorname:   -------------    Name:   -------------
Betreff:   -------------------------------------- (im IE durch Abstände deutlich kürzer)

Danke für jede Art von Erklärungsversuch!

Gruß Marco

[Detlef G.]

Hallo Marco

So, hier mal ein Ausschnitt aus dem Quellcode:

<div id="c1">Vorname:</div>
<div id="c2"><input type="text" id="contact" name="vorname" value=""></div>
...
<div id="c2"><input type="text" id="contact" style="width:420px" name="betreff" value=""></div>

Warum jedes extra in einem Div, warum kein Label?
Eine Id muss dokumentweit eindeutig sein, du verwendest jede Id mehrfach.

Vorname:   -------------    Name:   -------------
Betreff:   -------------------------------------- (im IE durch Abstände deutlich kürzer)

Dein Quelltextausschnitt ergibt aber etwas ganz anderes.
Wie sollen wir herausfinden, warum es im IE nicht so aussieht, wie du es wünscht, wenn dein Quelltext in _allen_ Browsern etwas komplett anderes ergibt.

Auf Wiederlesen
Detlef

[Marco]

Hallo Detlef,

Eine Id muss dokumentweit eindeutig sein, du verwendest jede Id mehrfach.

Darum gehts mir ja hier im Moment nicht, aber vllt zur Erklärung die css-Datei (c1,c2,c3 sind bloß die Blöcke, die dann mit 'float' nebeneinander angeordnet werden, hätte ich erwähnen sollen, sorry):

div#c1 {clear:left;float:left;width:100px;}
div#c2 {float:left;}
div#c3 {float:left;width:80px;}

Mir geht's darum, dass, wenn man z.B. 2 Eingabefelder in einer Zeile hat und nur eines in der Zeile darunter, dann wird durch die Abstände, die der IE vor und nach den ersten beiden Feldern macht, das dritte Feld zu kurz (weil ich doch den Zwischenraum zwischen den Feldern mit einberechnen muss).

Tut mir leid, besser kann ichs nicht erklären.

[Detlef G.]

Hallo Marco

Eine Id muss dokumentweit eindeutig sein, du verwendest jede Id mehrfach.

Darum gehts mir ja hier im Moment nicht,

Bevor es sinnvoll ist nach Darstellungproblemen zu suchen sollte das HTML schon valid sein. Es ist kaum möglich, eindeutig vorherzusagen, wie irgendein Browser etwas anzeigt, wenn er sich im "ich rate mal, wie es gemeint sein könnte"-Modus befindet.

Mir geht's darum, dass, wenn man z.B. 2 Eingabefelder in einer Zeile hat und nur eines in der Zeile darunter, dann wird durch die Abstände, die der IE vor und nach den ersten beiden Feldern macht, das dritte Feld zu kurz (weil ich doch den Zwischenraum zwischen den Feldern mit einberechnen muss).

Wenn ich deinen Quelltextschnipsel und dein CSS (ergänzt um #contact {width:170px;}) in ein Grundgerüst mit HTML-Transitional einfüge, erhalte ich im FF und im IE eine identische Darstellung.
Was steht sonst noch in deiner Seite oder deinem CSS?

Auf Wiederlesen
Detlef

[Marco]

Danke für die Hilfen, hab jetzt alles nochmal auf den Kopf gestellt und mir ist klar geworden, dass das Problem wohl nicht auf den IE sondern auf eine Verkettung unglücklicher 'float'-Befehle zurückzuführen war, mit dem die divs nicht zurechtkamen. Die Sache mit den Abständen erledigt sich tatsächlich, wenn man die floats in die inputs schreibt.

Also nochmal vielen Dank an alle, die versucht haben, mich auf die richtige Fährte zu führen.

Dementsprechend noch einen schönen Abend!

Marco