Positionierung von Grafik mit CSS

    Hi,

    ich erstelle gerade eine Portalseite mit OpenPHPNuke. Dabei habe ich ein Problem mit dem Firefox:

    In der Mitte der Seite werden Artikel angezeigt. Ist der Artikel einem bestimmten Thema zugeordnet, wird eine entsprechende Grafik rechts angezeigt.
    Jetzt möchte ich bei einigen Artikeln auch links eine Grafik anzeigen. Nach den entsprechenden Änderungen zeigt mir der IE die Seite richtig an, bei meinem Firefox ist die linke Grafik etwas tiefer und der Text beginnt über der Grafik, obwohl das IMG-Tag vor dem Text steht.

    Problem - Homepage

    Ist da noch ein Fehler in meinem CSS (den der IE ignoriert) oder aber ist das ein Bug des Firefox?

    Ciao,

    Mike[/url]

    Aus der thw.css:
    .themecenterboxcontent, .opncenterbox {color:#000; background:transparent; font:12px Verdana,Arial,Helvetica,sans-serif; border:0px solid #3A428C; padding:0px 5px 5px;}

    Genau dieses Padding macht Firefox. Du hast 2 classen auf den <a>-Tag angewendt. Einmal .opncenterbox und einmal a.opncenterbox ... das erste gilt für alle objekte, die die klasse "opncenterbox" tragen, also auf für die <a>-Tags. das zweite gilt nur für die <a>-Tags. Durch die reihenfolge im quelltext wird auf das <a>-Tag mit dem Bild drin, erst die .opncenterbox mit dem paddingwert angewendet. dannach nocheinmal die a.opncenterbox-Klasse. Da diese keine paddingwerte mitliefert, behält Firefox diese bestehenden padding-werte bei.

    Lässt sich (so wie ich das jetzt so sehe) damit umgehen, dass du bei der a.opncenterbox-Klasse einfach noch padding:0px; anfügst. dann überschreibst du die vorherigen paddingwerte.

    a.themecenterboxcontent, a.opncenterbox {text-decoration:underline; border:none; padding:0px;}

    Hi bugcatcher,

    vielen Dank! Das war's! :)

    Eine ?banale Frage: Wie bist Du darauf gekommen? Hast Du dir nur den Quelltext angesehen, oder gibt es ein Hilfsmittel, mit dem man solchen Problemen auf die Spur kommt?

    Ciao,

    Mike