✔ Formularfelder sprengen divs im IE

[Lucretia]

Hallo liebe Experten,

seit Tagen sitze ich an einem Problem, bei dem ich einfach nicht weiterkomme:

Ich habe ein Layout mit mehrern verschachtelten divs, der Content ist zweispaltig. Funktioniert auch alles soweit, nur auf einer Unterseite nicht. Hier sollen Formularfelder in die linke und in die rechte Spalte.
Solange ich rechts nur Text habe, ist alles gut. Aber sobald ich da auch nur ein Formularfeld reinpacke, zerhaut mir der Win IE mein Layout:

Variante nur mit Text: http://www.pixochrome.de/pixochrome3/html/beratungs2.php

Variante mit einem kleinen Formularfeld, das testhalber mit weniger Formatierungen belegt ist, als es eigentlich sollte: http://www.pixochrome.de/pixochrome3/html/beratungs.php

Variante, wie es eigentlich werden soll: http://www.pixochrome.de/pixochrome3/html/beratungs1.php

Hier ist die CSS-Datei:
http://www.pixochrome.de/pixochrome3/html/stylesheets.css

Hat jemand eine Idee, woran das liegt und wie ich das Problem lösen könnte?

Wäre wirklich sehr dankbar für sachdienliche Hinweise!


ach, und wo ich schon dabei bin, noch eine kleine Frage:

Kann ich eigentlich irgendwie über CSS den Texteinzug bei einer Liste steuern?
Ich habe ul bzw. li mit padding-left: -20px bzw margin-left: -20px belegt, was aber alles nicht funktioniert. text-indent hab ich auch schon ausprobiert, ging auch nicht.

Ich hätte gerne, dass die Bullets meiner Liste (ist mit list-style-position: outside; formatiert) mit meinem restlichen Text linksbündig sind. Also diese ca. 20 Pixel automatische Einrückung loswerden, aber trotzdem "position outside" beibehalten.
Geht das?

1000 Dank im Voraus!

 

[Quaese]

Hi,

zum ersten Problem:
Der IE hat im Element textrechts Probleme mit dem linken Außenabstand margin-left: 400px.
Diesen rückt er offensichtlich zusätzlich ein, was zur Folge hat, dass das Element zu breit wird.

Als Lösung kannst du mit Hilfe eines Filters den linken Außenabstand für IEs auf Null zurücksetzen
(die folgende Codepassage nach der Klasse .textrechts einfügen):

* html .textrechts{ margin-left: 0;}

Zur zweiten Frage:
Setze für die Liste zunächst die Innenabstände (padding) alle zu Null. Anschließend kannst du
über margin-left den linken Abstand einstellen:

ul{ list-style-position: outside;
    padding: 0;
    margin-left: 18px;}

Ciao
Quaese

 

[Lucretia]

Hey Quaese,

ganz dickes Dankeschön an dich!! Jetzt alles, juhuu!

Da wär ich von selber wohl nie drauf gekommen
Hab mich gestern noch durch die ganzen IE-Bugs auf http://www.positioniseverything.net/ gequält und auch dort keine Lösung gefunden...

Aber das hier musst du mir mal erklären:

* html .textrechts{ margin-left: 0;}

Was ist das denn für ein Befehl? Hab ich ja bisher noch nie von gehört... :-(

Naja, wieder was gelernt
Danke!!

 

[Maik]

Aber das hier musst du mir mal erklären:

* html .textrechts{ margin-left: 0;}

Was ist das denn für ein Befehl? Hab ich ja bisher noch nie von gehört... :-(

Hierbei handelt es sich um den Star HTML-Hack, der nur vom InternetExplorer (Windows) interpretiert / ausgeführt wird.

 

[Lucretia]

ah, danke - wieder was gelernt!