Doppelter Rand im IE6

    Hallöchen,
    ich habe mir vor einiger Zeit das Theme "Bookish" herunter geladen und angefangen, es für WP 2.3 zu adaptieren (Widgets etc.). Seither bessere ich nur noch Fehler aus, ob meine eigenen oder bereits vorhandene, sei einmal dahin gestellt *gg*.

    Eine kleine Frage habe ich noch, es ist offensichtlich einer der berühmten IE-Bugs dafür verantwortlich, ich bin allerdings da noch nicht so versiert beim entsprechenden CSS-Schreiben.

    Ich habe eine Grafik in einem Fließtext. Die Grafik hat einen Margin, der vom IE6 verdoppelt wird, und zwar auf der rechten Seite, wenn die Grafik rechts angeordnet ist im Text, und links, wenn sie links angeordnet wird.

    Zu sehen ist das Problemchen hier:
    Zu meiner Problemseite

    Was muss ich tun, um das zu korrigieren?

    LG, hzirl

    • Gerade eben
    • 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

    Hallo
    Also ich sehe keine Probleme. Aber wenn du den IE 5.5 - IE 6 ansprechen willst, ist dieser Tag hier richtig.

    * html body { /* Gilt nur für IE */
    width: 1005px;
    }

    html > body { /* Gilt nicht für IE */
    max-width: 1005px;
    min-width: 820px;
    }


    Hier noch die Gesamtliste:

    * html Nur IE bis Version 6
    *+html Nur IE, nur Version 7
    *+html, * html Nur IE, alle Versionen
    html>body Moderne Browser, IE nur Version 7
    html>/**/body Moderne Browser ohne IE 7

    Rupi: Wie soll eine Breitenangabe des Bodys mir bei der Lösung helfen? Ich fürchte, ich verstehe nicht ... Kannst du mir das ein bißchen erklären?

    Ich hatte bei der Grafik links und rechts einen Margin von 12px angegeben. Kommentiere ich die Ränder aus, stimmt die Darstellung wieder. Mit padding zu arbeiten, kommt für mich nicht in Frage, da ansonsten die Rahmen bzw. der Schatten um die Grafik herum nach nichts aussehen würden.

    Ich hatte erst vor kurzem über diesen double-float-margin etwas gelesen, entsinne mich nur leider nicht mehr, wo das war.

    LG, hzirl

    das war nur ein Beispiel, sorry. es geht nur um den Anfangstag, das heisst, wenn du speziell für den IE einen neuen margin setzen möchtest, dann verwendenst du diesen tag voraus. Den alten margin musst du aber lassen und die neuen einfach hinzufügen. (. oder # musst du selbst entscheiden)

    .Bildabstand { /*Firefox, Opera*/
    margin: 0 12px 0 12px;
    }

    * html .Bildabstand { /*Nur IE 6*/
    margin: 0 12px 0 12px;
    }

    *+html .Bildabstand { /*Nur IE 7*/
    margin: 0 12px 0 12px;
    }

    mit den margin musst du nun ein bisschen spielen, bis es halt für den IE stimmt. In Firefox und Opera ändert sich nichts.

    Konnte ich dir helfen?

    Hmm, ich habe jetzt eine funktionierende Variante, bei der ich dem Bild händisch im Editor eine Klasse zuweise, abhängig davon, ob das Bild rechts oder links angeordnet wird und dort jeweils den entsprechenden Rand halbiere ...

    Muss aber gestehen, dass mich das nicht glücklich macht ...

    Hab grad zu dem Bug, den ich meine, eine nette Seite gefunden (double-float margin Bug im Internet Explorer), allerdings nützt es mir recht wenig, das "display:inline" zu verwenden, das dort empfohlen wird ... Es reißt mir nur meine gesamten Padding-Werte weg, der Rand bleibt bestehen ...

    LG, hzirl

    habe ich dich eigentlich richtig verstanden? Dass das margin grundsätzlich funktioniert, doch beim IE nicht?
    Wenn das der Fall sein würde, müsste meine Variante klappen. Ansonsten musst du mir nochmals erklären um was es geht.
    hast du mir mal deine URL?

    Die URL ist oben im ersten Posting zu finden.

    Die Margins der Grafik funktionieren grundsätzlich überall, auch im IE6. Der IE6 verdoppelt mir die 12px ohne mein Zutun aber auf 24px, das ist das Problem.

    Mach die Seite einmal mit FF auf und einmal mit dem IE6, schau dir die Ränder an, dann siehst du genau, was ich meine.

    LG, hzirl

    versuche es damit mal.

    anstatt:

    * html #main img.right {
    margin:0 6px 0 12px;
    }

    * html #main img.left {
    margin:0 12px 0 6px;
    }


    ersetzen durch:

    * html #main img {
    padding: 4px 10px 10px 4px;
    background:url(images/shadow.gif) no-repeat right bottom;
    border-top:#eee 1px solid;
    border-left:#eee 1px solid;
    border-right:#fff 1px solid;
    border-bottom:#fff 1px solid;
    display:block;
    margin-left:12px;
    margin-right:6px;
    }

    Okay, das "display:inline" muss ich bei meiner Grafik dazu hängen ... Hätte ich ja fast selbst draufkommen können ...

    marX: War meine anfängliche Vermutung ja nicht so schlecht *gg*.

    Vielen Dank für eure Hilfe!

    LG, hzirl

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden