float in IE falsch dargestellt
Olli
- css
1 Cheatah0 Olli0 Olli0 Rouven0 Ingo Turski
Hallo,
ich habe folgendes Problem:
Ich möchte auf der linken Seite Text (ungeordnete Liste) haben, der um Bilder, die rechts positioniert sind, herumfließt. Es handelt sich um eine Chronik, die je nach Jahr unterschiedlich viele Listenpunkte hat, und nur teilweise ein Bild vorhanden ist. Eigentlich funktioniert das ja mit float, aber im Internet Explorer funktioniert das nicht, im Firefox schon. Also hier der entscheidende Code:
(head:)
<style type="text/css">
li { position:relative; list-style-type:disc; line-height:2.4; }
img { position:relative; float:right; right:0; top:0; }
</style>
(body:)
<dir>
<li>1950</li>
<br />
<img src="Bild.jpg" alt="Bild" width="200" height="120" />
<br />
<li>Dieser Text soll um das Bild herumfließen</li>
<li>Er soll nicht unterhalb dem Bild verlaufen</li>
</dir>
Was muss ich ändern, damit es funktioniert?
Hi,
Also hier der entscheidende Code:
[...]
<dir>
<dir> ist deprecated bzw. existiert nicht (mehr). Verwende etwas anderes, z.B. <ul>, <ol> oder <dl>.
<li>1950</li>
<br />
Das Content-Modell von <dir> lautet "(li)+". <br> ist nicht erlaubt, <img> ebenfalls nicht.
Was muss ich ändern, damit es funktioniert?
Schreibe zunächst einmal validen Code. Dann sehen wir weiter.
Cheatah
Da es auch mit ul nicht funktioniert, habe ich es jetzt folgendermaßen gemacht:
<div>
<p>1950</p>
<ul>
<img src="Bild.jpg" alt="Bild" width="200" height="120" />
<li>Dieser Text flißt um das Bild herum</li>
<li>Hier steht text</li>
</ul>
</div>
So bin ich zufrieden und wenn keiner ne bessere Lösung hat, werde ich es dabei lassen.
Korrigiere:
<div>
<p>1950</p>
<img src="Bild.jpg" alt="Bild" width="200" height="120" />
<ul>
<li>Dieser Text flißt um das Bild herum</li>
<li>Hier steht text</li>
</ul>
</div>
Wie gut wenn man sich selber helfen kann ;)
Hello,
<ul>
<img src="Bild.jpg" alt="Bild" width="200" height="120" />
So bin ich zufrieden und wenn keiner ne bessere Lösung hat, werde ich es dabei lassen.
das ist schön, dass du zufrieden bist. Nur bitte wäge sorgfältig ab, ob du zukünftige Darstellungsfehler mühselig suchen möchtest. Deine Dokumentstruktur ist immer noch invalide, damit schickst du den Browser in den Quirks-Mode. Wie dein CSS dann angewendet wird, kann kaum vorhergesagt werden und ist in den seltensten Fällen für verschiedene Browser deckungsgleich.
MfG
Rouven
Hi,
So bin ich zufrieden und wenn keiner ne bessere Lösung hat, werde ich es dabei lassen.
Hätte ich schon. Nur müsste ich dazu wissen, was Du genau auszeichnen willst, denn danach sollte sich die Wahl der HTML-Elemente richten.
<p>1950</p> ist wohl kaum ein Textabsatz. Eher eine Überschrift oder ein Listenpunkt in einer mehrdimensionalen Liste. Vielleicht aber auch ein zu definierenden Ausdruck in einer dl.
freundliche Grüße
Ingo