Listenformatierung - FireFox und IE starke Abweichungen
Kreuvf
- css
Frage ist eigentlich ganz einfach:
Ich habe ein HTML-Dokument mit mehreren Listen, die ich per CSS jeweils unterschiedlich formatiert habe.
Problem daran: FireFox und Internet Explorer haben erschreckend hohe Abweichungen.
Mir persönlich scheint es allerdings so, dass hier der Internet Explorer eine "richtige" Darstellung an den Tag legt. Da ich weder weiß wonach ich für dieses Problem genau suchen soll, haben Suchen hier im SelfHTML-Forum und den FireFox-Foren/Boards keine brauchbaren Resultate erzielt.
Darstellung im IE 6.0
Darstellung im FF
Auf der W3C-Seite zur Beschreibung der Formatierung von Listen mit CSS habe ich auch keine Antwort finden können.
Meine Frage zu dem Problem: Wer zeigt die Liste richtig formatiert an? IE oder FF?
Liebe(r) Kreuvf,
schön, dass Du keine Größenangabe zu diesen verlinkten Bildern machst. Es hätte bei diesen Bildern auch gereicht, den wichtigen Teil freizustellen, sodass man nicht ein Bild in 1280x1024-Auflösung ansehen muss. Wer keine solche Desktop-Auflösung hat, muss scrollen.
Dein Problem liegt sehr wahrscheinlich in unterschiedlichen default-Einstellungen der Browser-Stylesheets begründet. Wenn Du zu <ul> und seinen <li>s alle(!) Anzeige-Werte selbst festlegst, dann sollte es in beiden genannten Browsern auch annähernd identisch aussehen (sofern der IE nicht im Quirksmodus ist). SelfHTML berät Dich bei den Möglichkeiten.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
Liebe(r) Kreuvf,
Darstellung im FF
schön, dass Du keine Größenangabe zu diesen verlinkten Bildern machst. Es hätte bei diesen Bildern auch gereicht, den wichtigen Teil freizustellen, sodass man nicht ein Bild in 1280x1024-Auflösung ansehen muss. Wer keine solche Desktop-Auflösung hat, muss scrollen.
Wollte die ja erst per Image hier reinstellen und habs dann gelassen
als ich gesehen habe wie groß die sind (hab auch 1024x768 und muss scrollen) ;)
Dein Problem liegt sehr wahrscheinlich in unterschiedlichen default-Einstellungen der Browser-Stylesheets begründet. Wenn Du zu <ul> und seinen <li>s alle(!) Anzeige-Werte selbst festlegst, dann sollte es in beiden genannten Browsern auch annähernd identisch aussehen (sofern der IE nicht im Quirksmodus ist). SelfHTML berät Dich bei den Möglichkeiten.
Das heißt so viel wie: Jede mögliche Angabe reinpacken, damit den Browsern so wenig Spielraum für eigene Default-Werte bleibt wie nur möglich, richtig?
Hi Kreuvf!
Das heißt so viel wie: Jede mögliche Angabe reinpacken, damit den Browsern so wenig Spielraum für eigene Default-Werte bleibt wie nur möglich, richtig?
Rrrrrrrüüschtüüüsch! :)
MfG H☼psel
Ich bin mir mittlerweile ziemlich sicher, dass FireFox da etwas einfach anders (obs falsch ist, weiß ich nicht) interpretiert.
Problem war, dass eine UL mit margin-left: 1em; im Internet Explorer (wie von mir gedacht) 1em Abstand vom linken Seitenrand hat. Im FireFox hingegen haben wir den vorherigen Abstand (den Standardabstand von ~2em) PLUS margin-left von 1em. Damit kommen wir auf 3em.
Habe deshalb per
<style type="text/css">@import url(firefox.css) all;</style>
<!--[if IE]>
<style type="text/css">@import url(list.css);</style>
<![endif]-->
beschlossen den IE als Ausnahme gesondert zu behandeln und hoffe jetzt, dass es alle anderen (nicht-IE)-Browser so machen wie FireFox.
Für FireFox habe ich dann einfach einen margin-left von -1em verwendet, da mir keine andere Lösung bekannt ist (obwohl das doch eigentlich streng genommen dann in einem 1em breiten, nicht sichtbaren Streifen resultieren müsste).
Hallo,
Ich bin mir mittlerweile ziemlich sicher, dass FireFox da etwas einfach anders (obs falsch ist, weiß ich nicht) interpretiert.
Nein, der IE macht bei Listen die Ausnahme, dass die Aufzählungszeichen bzw. Aufzählungsnummerierung nicht mit im border-edge des UL-Eements liegt. Das ist aber nichts, was man nicht mit dem Setzen von margin-left _und_ padding-left für die UL _und_ LI-Elemente für alle Browser _ohne_ Hacks bw CCs funktionierend hinbekommen könnte.
https://forum.selfhtml.org/?t=117997&m=756243
Für FireFox habe ich dann einfach einen margin-left von -1em verwendet, da mir keine andere Lösung bekannt ist
Wie gesagt, setze margin _und_ padding der UL- _und_ LI-Elemente auf Werte, die in allen Browsern eine gleiche Darstellung erzeugen. Deine Lösung würde _mich_ nicht zufriedenstellen.
viele Grüße
Axel
btw.: Das mit dem margin-top:-1em; häte ich durch margin-bottom:0 des vorhergehenden Elements gelöst.