nicht angemeldet
Hallo Leute,
ich habe eine vergleichbar einfache HTML-Konstruktion, aber meine 3 Browser stellen sie unterschiedlich dar.
Hier zunächst der HTML-Quelltext
...
<ul>
<li>
<img src="bild.jpg" alt="Alternativtext" style="float:left; margin-left:1em; margin-right: 1em;">
<a href="ziel.html">Linktext</a>
</li>
...
</ul>
Für <li> ist im zentralen CSS-File nur Schriftgröße und -farbe formatiert, für <ul> gar nichts. Das Bild ist unwesentlich höher als eine Druckzeile und etwa quadratisch.
Und so sieht das Ganze im Browser aus:
Internet Explorer (6 und 7beta Preview) bringt zunächst einen Abstand vom linken Rand, dann das Bild, danach das Aufzählungszeichen (dicker Punkt) und dann den Link-Text.
Firefox 1.5 bringt ganz vorne den Aufzählungspunkt (ohne Abstand, also in einer Flucht mit dem Ansatz der übrigen Punkte, die keine Bilder haben), dann den Abstand von 1em, dann das Bild und nach weiterem angemessenen Abstand den Linktext.
Opera 8.52 bringt zunächst einen linken Abstand, dann das Bild und daneben im passenden Abstand den Linktext. Der Aufzählungspunkt fehlt ganz, aber nur bei diesem Eintrag - bei denen ohne Bild, ist er natürlich vorhanden.
Mir sind alle 3 Darstellungen recht, da sie die gewünschte Gliederung immer noch abbilden. Optisch gefällt mir die Variante vom Firefox etwas besser als die übrigen, wohl wegen der durchgehenden Fluchtlinie.
Aber, wie müsste es denn gemäß der reinen CSS-Lehre aussehen ?
Habe ich irgendwas falsch gemacht, was die Browser aus dem Tritt bringt ?
Validierung beim W3C-Validator mit HTML-Strict bringt übrigens keine Fehler.
Der Martin