list-style-image im Internet Explorer

  • Hi Leute,

    ich noch 'mal: Ich habe entweder einen Knoten im Kopf, oder das Prinzip ist wirklich schwer zu begreifen. :-?

    Auf der Seite http://forum.wordpress-deutschland.org/www.zum-gl%C3%…Cck-gecoacht.de wird im Firefox 3 die Sidebar korrekt angezeigt. Im IE 6 oder IE 7 fehlen die list-style-images. Es ist kein Hexenwerk, nur der Internet Explorer - der ist nämlich Teufelswerk :twisted: - , ich weiß, aber was habe ich falsch gemacht?

    Danke für eure Hilfe!

    Beste Grüße
    CMSFan

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Guten Morgen!

    Für deine Antwort danke ich dir, perryzelda, aber ich bin leider noch nicht weiter.

    Vorab: Ich versuche hier immer erst dann zu posten, wenn es nicht mehr weiter geht. Bis dahin habe ich dann alles mir Erdenkliche versucht, so hatte ich natürlich schon zuvor bei SelfHTML nachgelesen, habe mich auf CSS-Seiten informiert, bitte euch also nicht leichtfertig um Hilfe. Falls dieser Eindruck entstanden sein sollte, entschuldige ich mich hiermit ausdrücklich.

    Wenn ich in den CSS-Regeln nachschlage und diese dann implementiere, dann erhalte ich sofort einen Code, der in allen drei notwendigen Browsern funktioniert: FF3, IE6 und IE7. Zu sehen unter Testseite: Unsortierte Liste. Alle List-Images sind zu sehen.

    Ich habe mir den Seitenquelltext von der Seite mit dem Menu http://www.zum-glueck-gecoacht.de angesehen und finde keinen strukturellen Unterschied zu meiner o.g. Testseite. Dennoch wird die Menü-Seite nicht richtig angezeigt, soll heißen: Im FF3 sind die List-Images sichtbar, im IE6 und IE7 sind die List-Images nicht sichtbar.

    Könnte mir einer bitte mal die Augen öffnen? Danke!

    Bester Gruß
    CMSFan

  • weil es mit Listen in den Browsern immer wieder Probleme mit unterschiedlicher Darstellung gibt, mach ich das generell anders: anstatt list-style-image verwendet ich ein background-image für die Listpunkte. (Es spielen da auch immer noch die Verhältnisse zu den umliegenden Containern, margins und paddings, inside und outside eine Rolle)

    Eine solche Struktur schaut dann so aus:

    Code
    #menu ul li    { list-style:none; list-style-image:none; background: url(......) [COLOR=Red]left 5px[/COLOR] no-repeat; padding:3px 0 3px 13px;}

    [COLOR=Red]left [/COLOR]und [COLOR=Red]5px[/COLOR] (also zuerst Position von links und dann von oben) sind zum genauen Positionieren des Bildes. Das hat auch den Vorteil, dass du mit dieser Lösung die Position gelichmäßig einrichten kannst, auch wenn der Text 2- oder mehrzeilig wird.

  • Hey, perryzelda,

    du bist definitiv mein Held des Tages!!! :mrgreen:

    Danke schön! Das war genau das, was ich gesucht hatte. Und ich war schon einmal ganz kurz davor gewesen, das hinzubekommen. Leider war ich an einem Padding-left gescheitert. Der ist jetzt drin und das Ergebnis ist prima.

    Lediglich im IE6 gibt es noch ein Problem, nämlich dass der Abstand zur weißen Linie geringer ist, als bei den anderen Browsern.

    :?: Könnte man das so lösen: Den abfragenden Browser ermitteln (IE6) muss die Antwort sein und dann nach der wesentlichen style.css ein zusätzliches CSS laden, in dem die konkrete Klasse leicht modifiziert steht. Dann müsste doch die Klasse erst im style.css definiert sein, dann wird das zweite css geladen und damit die Klasse umdefiniert.

    Habe eben einen Test gemacht:

    HTML
    <style type="text/css" media="screen">
            @import url( http://www.zum-glueck-gecoacht.de/wp-content/themes/classic/style.css );
        </style>
    <!-- [if IE]><style type="text/css" media="screen">@import url( http://www.zum-glueck-gecoacht.de/wp-content/themes/classic/ie6.css );</style><![endif]-->

    Hat aber leider nicht funktioniert. Weiß jemand, wieso?

    Hat jemand zufällig so etwas schon mal gemacht?

    Wie immer schon einmal vielen Dank für eure Mühe!!!

    Beste Grüße
    CMSFan

    Einmal editiert, zuletzt von CMSFan (22. Februar 2009 um 14:46)

  • du kannst ganz einfach für den IE6 eigene styles vorgeben:

    mit

    * html {.....}
    (die Anstände zwischen *, html und der Deklaration sind Absicht und notwendig)
    Das wird von den anderen Browsern ignoriert

    das schreibst du dann mit den für den IE6 nötigen Werten in die style.ss. keine eigene Weiche o.ä. erforderlich

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!