*Seufz* Fehldarstellung in Mozilla

[KD-one]

Hallo,

Ich habe mal die Liste designet, in der das Menü hinkünftig im <noscript> Bereich angezeigt werden soll.
Die Seite ist HTML und CSS valide.
HTML: http://validator.w3.org/check?uri=http%3A%2F%2Ffaq.united-web.at%2F_test%2Ffaq_neu.htm&charset=(detect+automatically)&doctype=(detect+automatically)&ss=1&sp=1
CSS: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ffaq.united-web.at%2F_test%2Ffaq_neu.htm&warning=1&profile=css2&usermedium=all
Getestet in IE 6, Opera 7.2, Firebird 0.7 und Mozilla 1.5.
Der IE und Opera stellen die Liste korrekt dar, wie ich es mir wünsche, aber Firebird und Mozilla zerreissen das Layout, da sie anscheinend mit negativen Marginwerten (ul.typ0) nicht umgehen können. Auch werden alle anderen Marginwerte viel zu weit dargestellt.
Die Seite: http://faq.united-web.at/_test/faq_neu.htm
Das CSS: http://faq.united-web.at/_test/standard.css

Weiß jemand von euch eine Lösung für dieses Problem oder kennt jemand einen Workaround dafür?
Noch ist es ja erst ein Entwurf, aber bevor ich weitermache, sollte es schon wie gewünscht funktionieren.

PS.: Bei aktiviertem JS wird, wenn die Seite fertig ist, nur die obere Liste angezeigt werden, während bei deaktiviertem JS diese verborgen wird und nur die untere Liste angezeigt werden wird.

Gruß

Kurt

[Jan H.]

Hallo,

Listen reagieren unterschiedlich auf css.
Um in diversen browsern die selben ergebnisse zu erzielen sollte man immer margin
_und_ padding für das jeweilige element formatieren.

So zb:

<style type="text/css">
<!--
ul, li{
margin:0 0 0 10px;
padding:0;}
.extra{margin:0 0 0 20px;}
-->
</style>

<ul>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<il>

<ul class="extra">
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
</ul>

</li>
</ul>

solltest du das gleiche ergebnis in verschiedenen browsern bekommen.

Noch etwas lektüre:
http://devedge.netscape.com/viewsource/2002/list-indent/
Consistent List Indentation

http://www.subotnik.net/style/list-box-test.html
Subotnik: list box implementations in different browsers

Gruss, Jan aus Dresden

[KD-one]

Hallo Jan,

Boah, jetzt bin ich hin und wech... :o)
Ich habe an den Formatierungen an sich gar nichts geändert, lediglich folgendes hinzugefügt:
ul, li
  {
  margin:0 0 0 0;
  padding:0;
         line-height:1.5em;
  }
Und was soll ich sagen, der Mozilla und der Firebird spielen plötzlich mit...
Die Sitedarstellung ist mit dem Zusatz von line-height sogar fast völlig identisch...
Trotzdem versteh ich das nicht wirklich, warum man die margins erst auf 0 setzen muss, damit dann eine korrekte Darstellung erfolgt...
Danke dir für den Tip, darauf muss man auch erst mal kommen! :-)

Gruß

Kurt

[Jan H.]

Hallo,

Trotzdem versteh ich das nicht wirklich, warum man die margins erst auf 0 setzen muss, damit dann eine korrekte Darstellung erfolgt...

Das hängt damit zusammen wie die einrückung des <ul> elementes default entsteht im jeweiligen browser.

Mach einfach mal ein paar rahmen drum und man sieht es:

<style type="text/css">
<!--
ul{border:1px solid red;}
li{border:1px solid lime;}
-->
</style>

<ul>
 <li>dfghdfgh</li>
 <li>fdghdfgh</li>
 <li>dfghfdgh</li>
 <li>dfghdfgh</li>
</ul>

Im mozilla wird die einrückung des <ul> elementes mit padding erzeugt und im IE mit margin. Daher sollte man beide abstände formatieren um gleiche darstellung zu erreichen.

Gruss, Jan aus Dresden

[KD-one]

Hallo Jan,

Im mozilla wird die einrückung des <ul> elementes mit padding erzeugt und im IE mit margin. Daher sollte man beide abstände formatieren um gleiche darstellung zu erreichen.

Ja, stimmt, mit diesem Konstrukt sieht man es ganz deutlich.
Danke nochmal. :-)

Gruß

Kurt