Marc Nilius: IE: Liste neben float korrekt darstellen

SELF-Forum

IE: Liste neben float korrekt darstellen

Marc Nilius
– Informationen zu den Bewertungsregeln

Moin Moin!

Liebe CSS-Freunde, heute morgen haengts bei mir aber richtig. Irgendwie bekomme ich noch nicht mal die Suche im Internet gepeilt. Deswegen hier nun mein Hilfeaufruf. :-)

Ich habe ein DIV-Element (mit einem Bild darin), welches mit einem "float:left;" versehen ist. Da herum fliesst nun Text. Aber eben nicht nur Text sondern auch eine Liste. Und genau da liegt das Problem: Die Listen-Bullets werden im IE nicht angezeigt. Wenn ich der Liste nun einen "margin-left" gebe, der breiter ist als das Bild, dann sehe ich die Bullets wieder. Dummerweise fliessen aber nicht alle meine Listen um irgendwelche Bilder und diese Bilder sind auch nicht immer gleich breit.
Folge: Da wo kein Bild ist, sieht die Liste ziemlich seltsam aus.

Dann habe ich das hier gefunden: http://barrierefrei.e-workers.de/workshops/ie-fun/index3.php

Aber keine Loesung oder Work-Around...

Koenntet ihr mir da auf die Spruenge helfen?

Ein wenig Quellcode zur Verdeutlichung:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
  
<html>  
<head>  
<title>Test</title>  
</head>  
  
<body>  
<div style="float:left;><img src="test.jpg" width="300" height="276"/></div>  
<p>Hier ist ganz viel Text und nicht nur das: auch eine Liste werden wir in diesen Text einbauen.</p>  
<ul>  
<li>Listenelement 1</li>  
<li>Listenelement 2</li>  
</ul>  
  
</body>  
</html>

Vielen Dank schonmal fuer eure Hilfe!

Viele Gruesse,
Marc

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. IE: Liste neben float korrekt darstellen

    Kim N.
    – Informationen zu den Bewertungsregeln

    Hallo...

    du könntest der Liste ebenfalls ein float:left geben, und das darauf folgende Element bekommt ein clear:left;

    Nur leider gibt es dafür noch keinen passenden Selektor.
    Also müsstest du es von Hand machen.

      
  
<html>  
<head>  
<title>Test</title>  
  
<style type="text/css">  
[code lang=css]  
img {float:left; margin-right:20px; }  
ul {  
 margin-left:0;  
 list-style-position:inside; /* ggf. auch über Bilder als Bullets arbeiten */  
 float:left; }  
  
p.nachliste {clear:left;}

    </style>

    </head>

    <body>

    <img src="test.jpg" width="200px" height="100px" alt="bild"/>
    <p>Hier ist ganz viel Text und nicht nur das: auch eine Liste werden wir in diesen Text einbauen.</p>

    <ul>
    <li>Listenelement 1</li>
    <li>Listenelement 2</li>
    <li>Listenelement 3</li>
    <li>Listenelement 4</li>
    <li>Listenelement 5</li>
    <li>Listenelement 6</li>
    <li>Listenelement 7</li>
    <li>Listenelement 8</li>
    </ul>

    <p class="nachliste">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>

    </body>
    </html>

    [/code]
    gruß

    Kim N.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. IE: Liste neben float korrekt darstellen

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Kim,

      das darauf folgende Element
      Nur leider gibt es dafür noch keinen passenden Selektor.

      Vielleicht doch?

      ul + *

      Live long and prosper,
      Gunnar

      --
      „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. IE: Liste neben float korrekt darstellen

        Kim N.
        – Informationen zu den Bewertungsregeln

        Hallo,

        Nur leider gibt es dafür noch keinen passenden Selektor.

        Vielleicht doch?

        ul + *

        ok, es gibt ihn, doch ist er auch praktikabel?

        http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente
        "Der Internet Explorer 6.0 interpretiert die Selektoren > und + noch nicht."[/link]

        Gruß
        Kim

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. IE: Liste neben float korrekt darstellen

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Marc,
    Keine Antwort auf dein Problem mit der Liste, aber:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    Von der Verwendung von XHTML 1.1 ist dringend abzuraten (siehe etliche Threads dazu im Archiv). Verwende XHTML 1.0 Strict.

    <html>

    Wenn du mit XHTML+XML nicht vertraut bist, verwende HTML 4.01 Strict. Die Namensraumangabe fehlt.

    <div style="float:left;>

    Ein Gänsefüßchen fehlt.

    <img src="test.jpg" width="300" height="276"/>

    Der Alternativtext fehlt.

    Live long and prosper,
    Gunnar

    --
    „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. IE: Liste neben float korrekt darstellen

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hallo,

    Dummerweise fliessen aber nicht alle meine Listen um irgendwelche Bilder und diese Bilder sind auch nicht immer gleich breit.
    Folge: Da wo kein Bild ist, sieht die Liste ziemlich seltsam aus.

    Du brauchst also eine spezielle _Klasse_ von Listen.

    Ein wenig Quellcode zur Verdeutlichung:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <html>
    <head>
    <title>Test</title>
    </head>

    <body>
    <div style="float:left;"><img src="test.jpg" width="300" height="276"/></div>
    <p>Hier ist ganz viel Text und nicht nur das: auch eine Liste werden wir in diesen Text einbauen.</p>
    <ul>
    <li>Listenelement 1</li>
    <li>Listenelement 2</li>
    </ul>

    </body>
    </html>

    
>   

Das zeigen bei mir alle Browser mit Bullets \_im\_ Bild an. Beim IE überdeckt das Bild die Bullets, was sicherlich falsch ist. Aber willst Du wirklich, dass die Bullets \_im\_ Bild stehen? Wenn nicht, zeige uns erst mal eine Version, die im Mozilla so funktioniert, wie Du willst.  
  
Btw.: Du bist sicher, dass Du XHTML 1.1 verwenden willst, mit allen Nachteilen, die sich daraus ergeben? Wenn ja, dann mach es wenigstens richtig.  
  
viele Grüße  
  
Axel
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln