nicht angemeldet
IE-Fehler: Vertikaler Versatz in Listenelement mit float-Image
Tag zusammen,
ich habe eine Liste von Texten (z.B. Artikelüberschriften oder Download-Dokumenten), in der jedem Listeneintrag ein Bild vorangestellt ist. Ich realisiere das so, dass in jedem li-Element das Bild mit "float:left" definiert ist und dann eine Box (z.B. div) mit dem Text folgt, die einen linken Rand in der Breite des Bildes hat. Funktioniert prima in normalen Browsern wie Firefox und Safari.
Internet Explorer 6 und 7 versetzen aber den Text um Einiges (19px in meinem Fall) nach unten!
Der Fehler taucht nur auf, wenn Bild und Text innerhalb eines li-Elements liegen. Wenn statt des Bildes ein einfacher Text benutzt wird (z.B. in einem div mit "float:left"), taucht der Fehler nicht auf.
In der einschlägigen Literatur und auch im Web hab ich keine Informationen dazu gefunden. Wenn mir jemand dabei helfen könnte, würde ich mich freuen! Danke schon mal.
Eine Live-Demo findet ihr unter http://oetelshofen.webseiten.cc/35.html, und zwar gleich zweimal: im mittleren Bereich der Seite die Download-Liste und im rechten Bereich die Artikel-Liste. Im IE ist der Text neben dem Bild jeweils nach unten versetzt.
Mit dem folgenden Code habe ich den Fehler isoliert. Er demonstriert 4 verschiedene Fälle:
1. Float-Bild mit Text nicht in Liste (korrekte Darstellung)
2. Float-Bild mit Text in Liste (falsche Darstellung)
3. Float-Text mit Text in Liste (korrekte Darstellung)
4. Nur Text (ohne float-bild oder -Text) in Liste (korrekte Darstellung)
Zur Verdeutlichung haben alle Elemente einen Rahmen.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
}
ul {
list-style-type: none;
}
li {
border: 1px solid red;
}
.floating_element {
float: left;
font-size: 200%; /* Nur bei Text relevant */
border: 1px solid green;
}
.text_element {
margin-left: 60px; /* Text schiebt sich unter das float-Objekt */
border: 1px solid blue;
}
</style>
</head>
<body>
<div>
<img class="floating_element" src="bild.gif" />
<div class="text_element">
Nicht in Liste
</div>
</div>
<div style="clear: both;"> </div>
<ul>
<li>
<img class="floating_element" src="bild.gif" />
<div class="text_element">
In Liste, mit <i>float</i>-Bild
</div>
</li>
</ul>
<div style="clear: both;"> </div>
<ul>
<li>
<div class="floating_element">X</div>
<div class="text_element">
In Liste, mit <i>float</i>-Text
</div>
</li>
</ul>
<div style="clear: both;"> </div>
<ul>
<li>
<div class="text_element">
In Liste, ohne <i>float</i>-Element
</div>
</li>
</ul>
</body>
</html>
-
Hi,
Eine Live-Demo findet ihr unter http://oetelshofen.webseiten.cc/35.html, und zwar gleich zweimal: im mittleren Bereich der Seite die Download-Liste und im rechten Bereich die Artikel-Liste. Im IE ist der Text neben dem Bild jeweils nach unten versetzt.
Kann ich mit dem IE 7 nur in der rechten Liste nachvollziehen.
Und da ist es unsinnig, ueber Fehlerursachen spekulieren zu wollen, weil du dort ungueltiges HTML vorliegen hast (DL in A).Mit dem folgenden Code habe ich den Fehler isoliert. Er demonstriert 4 verschiedene Fälle
Online-Beispiel davon, bitte.
MfG ChrisB
-
Mit dem folgenden Code habe ich den Fehler isoliert. Er demonstriert 4 verschiedene Fälle
Online-Beispiel davon, bitte.
MfG ChrisB
Yep: http://oetelshofen.webseiten.cc/tiger/tiger.html
-