Probleme mit Image im IE

  • Hallo,

    ich arbeite normal mit dem Firefox und hab erst mal meine Seite so angepasst, dass es passt. Jetzt hab ich die Seite mal im IE 7 angeschaut und habe hier einen komischen Effekt bei einem Bild.

    Ich hab das Bild über CSS wie folgt eingefügt:

    Code
    .postcom_icons {clear: both; background: transparent url(images/bubble.gif) no-repeat scroll center top; padding-left: 20px;}

    Im Quellcode ist das Bild dann so eingehängt:

    HTML
    <p class="postcom"><img class="postcom_icons" /> ...</p>

    Ich gebe zu, es fehlt das src-Attribut, aber ich möchte das Bild gern über das CSS einbinden und nicht direkt über ein src-Attribut.

    Im Firefox sieht alles sauber aus, im IE allerdings leider nicht (siehe angehängte Screenshots).

    Was kann ich denn machen, damit das im IE auch gut aussieht?

    • 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

  • Ah, okay, das Problem war das <div> innerhalb eines <p>.

    Ich hab das <p> jetzt auch durch ein <div> ersetzt und darin das andere <div>-Tag und darin wiederum das <a>-Tag geschachtelt.

    Dann war wirklich, wie Du gesagt hast, auch noch die Breite wichtig!

    Super, vielen Dank für die Hilfe - good job!!

  • im nachhinein gesehen sollte das noch einfacher gehen:

    HTML
    <p class="postcom postcom_icons"> ...</p>



    und die css:

    Code
    .postcom_icons {clear: both; background: transparent [URL="http://forum.wordpress-deutschland.org/lexikon/?do=showentry&item=url"][COLOR=#000000]url[/COLOR][/URL](images/bubble.gif) no-repeat scroll left top; padding-left: 20px;}



    anstelle von 'left' kannst du auch pixel eingeben, zB. 5px

  • im nachhinein gesehen sollte das noch einfacher gehen:

    HTML
    <p class="postcom postcom_icons"> ...</p>

    Da hast Du Recht. Das war so am Anfang, aber das musste ich abändern, weil nach dem Icon noch ein Link durch eine Funktion generiert wird und so hätte ich dann das Icon auch noch im Link mit drin.


    Zitat


    und die css:

    Code
    .postcom_icons {clear: both; background: transparent [URL="http://forum.wordpress-deutschland.org/lexikon/?do=showentry&item=url"][COLOR=#000000]url[/COLOR][/URL](images/bubble.gif) no-repeat scroll left top; padding-left: 20px;}

    anstelle von 'left' kannst du auch pixel eingeben, zB. 5px

    Okay, das werd ich berücksichtigen!

Jetzt mitmachen!

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