Darstellung von Listen in IE6 und Firefox

NetPerformance

Erfahrenes Mitglied
Hallo Zusammen,

ich habe ein etwas größeres Problem mit listen.
Referenzbrowser ist IE6 und Firefox.

Auf dem Screenshot (Anhang: problem_mit_listen_kommentiert.jpg) ist auf der linken Seite die Firefox-Lösung zu sehen. Auf der rechten Seite die IE6-Lösung.

Ich habe 3 Probleme mit der Darstellung:

1: Sowohl bei IE6 als auch bei Firefox muss die liste weiter nach rechts verschoben werden.
2: Unter Firefox wird der Inhalt nach der Nummerierung nicht angezeigt.
3: Unter IE6 wird das Listenelement nicht angezeigt.

Anbei stelle ich euch die HTML-Datei zur Verfügung. Bitte nicht erschrecken! der Inhalt wurde dynamisch aus dem CMS-System zusammengeschraubt und exportiert.


Bin für jede Hilfe dankbar !

Gruß
Aaron
 

Anhänge

  • problem_mit_listen_kommentiert.jpg
    problem_mit_listen_kommentiert.jpg
    120,6 KB · Aufrufe: 20
  • image.gif
    image.gif
    1,5 KB · Aufrufe: 71
  • list.zip
    list.zip
    3,1 KB · Aufrufe: 13
Hi,

  • Bestimme einen linken Außenabstand für den rechten Block.

  • Da muß wohl zwischendurch die Floatumgebung "gecleart" werden.

  • Ändere
Code:
UL {
        LIST-STYLE-TYPE: none;
}
gegen
Code:
UL {
        LIST-STYLE-TYPE: circle;
}

Achja, was hat es denn eigentlich hiermit auf sich?

Code:
<STYLE>
{
        PADDING-RIGHT: 0px;
        PADDING-LEFT: 0px;
        PADDING-BOTTOM: 0px;
        MARGIN: 0px;
        PADDING-TOP: 0px
}


Außerdem kannst du diverse Regelblöcke "komprimieren", aus:

CSS:
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px
wird:

CSS:
padding:0;
margin:0;


Und wenn du diese beide Regeln zu Beginn des Stylesheets mit dem Universal-Selektor * verknüpfst, erübrigen sich alle weiteren wiederholenden CSS-Regeln, um die Polsterungseigenschaften diverser Elemente zurückzusetzen, da dieser Selektortyp alle im HTML-Dokument enthaltenden Elemente einbezieht.

mfg Maik
 
2. Da muß wohl zwischendurch die Floatumgebung "gecleart" werden.
Stimmt so nicht - Berichtigung:

Code:
     <DIV class="content">
      <OL>
       <LI>
        <DIV class="image">
         A sporting spectacle with weighty stakes: When thick‑skinned players with upright eats and flying trunks storm on the field during the annual.
        </DIV>
       </LI>
      </OL>
... ist hier der Übeltäter.

mfg Maik
 
Hallo Maik,

denke für die schnelle Antwort.

Die Lösungen haben die Probleme leider nicht gelöst.

1: durch die Angabe von einem Außenabstand zerschieße ich das Layout. Weiterhin habe ich das Problem, dass der Abstand erst nach 140px korrekt dargestellt wird.

Screenshot: Screenshot !

Code:
.textAndImageLeft ul, .textAndImageLeft ol {
	margin-left: 22px;

	padding-left: 140px;  /* ----------- new line ---------- */
	/* left: 30px; */

}


2: Ich rufe nach der Auflistung immer wieder die classe 'clear' auf.

Code:
<DIV class="clear">


3: sehe leider keine Veränderung.


Hast du die Änderungen bei dir vorgenommen ?


Gruß
Aaron
 
Code:
<DIV class="content" style="margin-left:140px;">
... zerschiesst bei mir das Layout überhaupt nicht.

Zum zweiten Punkt hab ich doch meine Berichtigung gepostet.

Alle drei Vorschläge funktionieren bei mir wie gewünscht. Oder glaubst du, dass ich dich/die User mit meinen Antworten auf's Glatteis führen will?

lg Maik
 
Code:
<DIV class="content" style="margin-left:140px;">
... zerschiesst bei mir das Layout überhaupt nicht.

Durch den Abstand funktioniert das 'floaten' nicht mehr.

Screenshot !

Sieht es bei dir auch so aus, oder habe ich was falsch umgesetzt ?!

Zum zweiten Punkt hab ich doch meine Berichtigung gepostet.

Funktioniert ! Danke !
Hatte deine zweite Antwort nicht rechtzeitig gesehen.

Alle drei Vorschläge funktionieren bei mir wie gewünscht. Oder glaubst du, dass ich dich/die User mit meinen Antworten auf's Glatteis führen will?

Nein, war auch überhaupt nicht böse gemeint :)
Kenne ein paar erfahrene Entwickler, die sich den Quelltext anschauen und den Fehler sehen, ohne viel ausprobieren zu müssen.

Gruß
Aaron
 
Code:
.textAndImageLeft ul, .textAndImageLeft ol {
        margin-left: 140px;
        list-style-position:inside;
}
Code:
<P class="content clear">
       An Asian elephant can weigh up to 5,000 kilograms - its 'mahout' (driver/owner) usually weighs under sixty kilograms.
      </P>


Desweitern wirst du obige CSS-Regel mit einem entsprechenden Selektor differenzieren müssen, damit sie nicht für alle Listenelemente gilt, die sich in einem Element mit der Klasse .textAndImageLeft befinden.

Viel Glück bei der Umsetzung - ich bin dann erstmal "offline" meinen Magen zu stärken :-)

mfg Maik
 
Die erste Lösung wirft leider neue Probleme auf.

Screenshot 1
Bevor du hier neu auftretende Probleme meldest, solltest du vielleicht mal meine Antwort vollständig lesen, und daraus deine Schlüsse ziehen, was zu tun ist, um dieses "Darstellungsproblem" in den Griff zu bekommen.

Die zweite Zeile fängt nicht mehr bündig an
CSS:
list-style-position:outside;

//edit

Die zweite Lösung zeigt bei mir keine Wirkung.


Screenshot 2
Bei mir schon:

demo.jpg

mfg Maik
 
Zurück