Wuffy: Browserunabhängiger Browserbug...

Beitrag lesen

Moin,

man nehme etwas XHTML:

...
<body>
....
<div id="seite">
  ...
  <div class="rightfloat">
    ...
    <div class="news-list">
    ...
    <ul>
       <li><a href="...">
           <b>Überschrift</b>
           <em>Datum</em>
           <span>Text</span>
           </a></li>
       <li>....
    </ul>
    </div>
    ...
    </div>
</div>

und formatiere dies mit einer ganzen Menge CSS. Ist das zuviel verlangt? Die gesamte Seite zeigen aktuelle Operas, IEs sowie Mozillas wunderbar an, doch jetzt, wo eine kleine Liste wie in dem Codeauszug oben kommt, versagen sie.

Verdeutlichende Styles:

#seite .news-list ul {
    margin: 0;
    padding: 0;
}

#seite .news-list li {
    margin: 5px;
    padding: 0;
    list-style-type: none;
}

#seite .news-list li a {
    display: block;
    padding: 4px;
    border: 1px solid black;
    clear: both;
    text-decoration: none;
}

#seite .news-list li a:link, #seite .news-list li a:visited {
}

#seite .news-list li a:hover {
}

#seite .news-list li a:active, #seite .news-list li a:focus {

}

#seite .news-list li strong {
    font-size: 100%;
    font-weight: bold;
    display: block;
    float: left;
}

#seite .news-list li em {
    font-style: italic;
    display: block;
    float: right;
}

#seite .news-list li span {
    clear: both;
}

Das ist selbstverständlich nur ein Rohgerüst, aber wohl kaum etwas zu viel verlangt, oder?

Ich habe mir die Freiheit genommen, die Umsetzung dieser Styles in den drei genannten Browsern zu fotografieren, um sie hier als bildchen anzuzeigen:

<img src="http://sveni.dnsalias.net/forum/svwebsrv.anzeige-mozilla.png" border="0" alt="">

Mozilla-Rendering. Sieht noch am Besten aus, obwohl hier unübersehbar völlig ignoriert wird, dass "list-style-type" auf "none" gesetzt wurde. Auch das "clear: both;" von jetzt sogar mehreren Elementen wurde komplett ignoriert.
Ansonsten sieht natürlich auch alles andere ganz fürchterlich aus...

<img src="http://sveni.dnsalias.net/forum/svwebsrv.anzeige-opera.png" border="0" alt="">

Opera-Darstellung. Zwar hat Opera "clear: both;" offensichtlich verstanden (Blitzmerker!), aber von Listenformatierung über CSS scheint auch dieser Browser noch nichts mitbekommen zu haben. Wie kommts?

<img src="http://sveni.dnsalias.net/forum/svwebsrv.anzeige-ie.png" border="0" alt="">

IE-Darstellung. Die totale Katastrophe. Es braucht gar nicht näher erläutert werden: Überhauptnicht nachvollziehbar ist die positionierung der bullets (die sollten ja gar nicht angezeigt werden.... argh!). Sieht alles etwas betrunken aus mit den lienen mal hier da, mal da hier und da nicht und hier nicht. M$ hat sich hier was ganz besonderes einfallen lassen: Beim hovern verschwinden ein paar linien, dafür erscheinen aber neue! Die bulletzeichen verschwinden dafür alle. Ein Wunder, dass die Linien nicht noch Schief sind.

So frage ich nun:

[ ] Ich bin zu blöd, ein bisschen CSS aufzusetzten
[ ] Mozilla ist zu blöd, mein CSS zu interpretieren
[ ] Opera auch
[ ] IE erst recht

Vielen Dank für rege wahlabgabe (aber bitte mehr als 50% Wahlbeteiligung!) - Kommentare erwünscht.

Der Wuffy | Wer sonst könnte sich mehr als 100 stunden mit so einem stumpfsinnn aufhalten, ohne verrückt zu werden?