Seite 1 von 1

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

Verfasst: 02.01.2010, 19:13
von Andreas I.
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:

Bild
luftig-locker im IE8


Bild
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?

Verfasst:
von
SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002
  • persönliche Betreuung
  • individuelle Beratung
  • kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.


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

Verfasst: 02.01.2010, 19:40
von Mork vom Ork
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 <p>-Element, anstatt den Außenabstand bei <ul> und <p> 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 <p> und <span> im Übrigen auch unnötig schwer und speziell für <span class="important"> solltest du kopfüber in die eisige Binnenalster getunkt werden, bis du ganz <strong> 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 <p> einstellen musst.

Verfasst: 03.01.2010, 08:01
von Stephan Zöllner
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 ...

Verfasst: 03.01.2010, 10:33
von todo
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?

Verfasst: 03.01.2010, 12:02
von Andreas I.
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 &bull; 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...