CSS & Listen: IE8 gegen Firefox, Chrome Opera ?!?

Beitrag von **Andreas I.** » 02.01.2010, 19:13

Guten Abend.

Ich sitze gerade an einer Webseite, auf der u.a. auch eine Liste vorkommt:
https://co2sparhaus.de/index.php?id=154

Dabei stehe ich jetzt vor dem Problem, dass der IE8 die Listen irgendwie recht luftig-locker rendert, der Rest der Browserwelt aber rendert die Listen fast so wie gewöhnlichen Text:

luftig-locker im IE8

Normal gerenderte Liste im (z.B) Opera. Im Firefox und in Chrome wird die Liste genauso kompakt gerendert.

Wie kriege ich jetzt den IE8 dazu, diese Liste nicht mehr so locker-flockig zu rendern?

von **Anzeige von ABAKUS** »

Beitrag von **Mork vom Ork** » 02.01.2010, 19:40

Andreas I. hat geschrieben:Dabei stehe ich jetzt vor dem Problem, dass der IE8 die Listen irgendwie recht luftig-locker rendert, der Rest der Browserwelt aber rendert die Listen fast so wie gewöhnlichen Text

Du klemmst <ul> mit der reichlich gewagten Maßnahme margin-top:-15px direkt an das vorangehende -Element, anstatt den Außenabstand bei <ul> und einfach auf 0 zu setzen. Auch wenn ich das Problem hier nicht nachvollziehen kann: Damit täte ich anfangen. Weiterhin solltest du tunlichst im standardkonformen Modus arbeiten, ansonsten sind Darstellungsunterschiede zwischen den Browsern buchstäblich vorprogrammiert.

Du machst es dir durch den Einsatz von lauter und im Übrigen auch unnötig schwer und speziell für solltest du kopfüber in die eisige Binnenalster getunkt werden, bis du ganz wehklagen tust ;) Nimm doch lieber ein wenig sinnvolles HTML:

<hn>Das Haspa-Wärmebild-Paket beinhaltet:<hn>
<ul>

Mit

hn { margin-bottom:0 }
hn + * {margin-top: 0 }

hängt dann jedes Element, das direkt auf <hn> folgt, genau unter dem <hn>, ohne, dass du noch speziell etwas für <ul> oder einstellen musst.

Beitrag von **Stephan Zöllner** » 03.01.2010, 08:01

noch ein Tip: " />" gehört zu XHTML und nicht zu HTML 4.x

vergl.: https://validator.w3.org/check?uri=http ... ne&group=0

und schau im FF mal Deinen Quelltext über HTML-Tidy an, dann merkst Du daß da noch einiges mehr an Verwirrung auf Seiten der Browser bei Deinem ausgelieferten Quelltext entsteht.
Der HTML-Aufbau sieht aus als ob da zig Leute nach diversen nicht miteinander zu vereinbarenden "Regeln" dran herumgebastelt hätten. Ist bei Typo3 aber nichts Neues, daß die ausgelieferten Seiten häufig so aussehen.

Ich würde erst mal die Templates gnadenlos auf HTML und CSS zusammenstreichen und das CSS konsequent extern laufen lassen. Reduziert nämlich die Quelltexte, belastet das Netz und die Bots weniger macht sie (auch für Dich) überichtlicher ... und hilft Dir (und den Browsern) dadurch auch Fehler (Fehinterpretationen, Quirk-Modus) zu vermeiden ...

Beitrag von **todo** » 03.01.2010, 10:33

ich weiß nicht, ob dus schon machst oder nutzt, aber das

Microsoft Expression Web 3 Service Pack 1

funktioniert ähnlich wie firebug und du kannst alle ie versionen damit recht leicht lokal testen.

hast du das dein problem schon mal mit ner css weiche und der eigenschaft line-height versucht zu ändern?

Beitrag von **Andreas I.** » 03.01.2010, 12:02

Ihr habt richtig erkannt, der Quelltext ist nicht alleine auf meinem Mist gewachsen. Eigentlich nur zu einem seht geringem Teil.
Line-height habe ich schon probiert. Ohne Wirkung.

Ich löse die luftigen Listen jetzt einfach per • in gewöhnlichen Text auf. Mal sehen, ob das klappt. Diese Unterseite ist auch nicht für SEO Zwecke gedacht, sondern wird anders beworben.

Schon eine ziemliche Drecksarbeit, so ein Typo3, an dem zig Leute mitgearbeitet haben und zu dem es keinerlei Dokumentation gibt...