Roje Schumacher: IE Focusrahmen fehlerh. Darst. bei CSS background-image

Hallo, wer kennt sich aus und kann und will helfen? Ich habe ein nämlich unschönes Problem mit meiner Homepage

http://mowlog.atspace.com/

Durch die CSS Funktion background-image in Verbindung mit leerem Linktext kommt es im IE6 zu einer falschen Darstelleung des Focusrahmen, insbesondere bei den untersten Links der einzelnen Kategorien. Mit Opera8.5, Firefox1.5 und NN7 funktioniert natürlich alles prima. Ich möchte es vermeiden die Rahmen ganz abzustellen.

Im Voraus herzlichen Dank!

  1. Hallo Roje,

    http://mowlog.atspace.com/

    http://mowlog.atspace.com/

    Durch die CSS Funktion background-image in Verbindung mit leerem Linktext kommt es im IE6 zu einer falschen Darstelleung des Focusrahmen, insbesondere bei den untersten Links der einzelnen Kategorien.

    wie äußert sich das? Ich kann dein Problem grad nicht nachvollziehen.

    Mit freundlichen Grüßen,
    André

    --
    Ein Geleitzug aus tausend Explosionen
    irgendwo in den Sternen verborgen
    relatives Sein zerbricht die Stille
    eine Träne flüstert Gottes Wille
    1. wie äußert sich das?

      Hallo, gemeint sind die kleinen orangefarbenen Quadrate, ich habe sie auf der HP Quick-Links genannt. Der Focus des IE6 umschließt diese Quadrate nicht, er macht nur einen wesentlich schmaleren Rahmen für 1 Leerzeichen, das ich als   eintragen mußte, sonst hätte er nichtmal die kleinen orangefarbenen Quadrate angezeigt. Bei den untersten Links zieht sich der Focus obendrein noch nach unten in die Länge.

      1. Hallo Roje,

        Hallo, gemeint sind die kleinen orangefarbenen Quadrate, ich habe sie auf der HP Quick-Links genannt. Der Focus des IE6 umschließt diese Quadrate nicht, er macht nur einen wesentlich schmaleren Rahmen für 1 Leerzeichen, das ich als   eintragen mußte, sonst hätte er nichtmal die kleinen orangefarbenen Quadrate angezeigt. Bei den untersten Links zieht sich der Focus obendrein noch nach unten in die Länge.

        Probier doch mal, deinen Links der Klasse red nicht nur eine vom Elternelement ererbte Zeilenhöhe zu geben, sondern eine eigene.

        Außerdem könnten sich im IE, obwohl das ja gegen den Standard ist, Angaben zu height und width sogar auf A-Elemente auswirken die in ihrer Defaulteinstellung auf display:inline bleiben. Ggf. kannst du die Links aber auch floaten lassen, musst dann aber wohl auch für jede neue Zeile (und nicht jeder deiner Links ist ja in einer neuen Zeile) clear einfügen.

        Gruß Gernot

        1. Probier doch mal, deinen Links der Klasse red nicht nur eine vom Elternelement ererbte Zeilenhöhe zu geben, sondern eine eigene.
          Außerdem könnten sich im IE, obwohl das ja gegen den Standard ist, Angaben zu height und width sogar auf A-Elemente auswirken die in ihrer Defaulteinstellung auf display:inline bleiben.

          Hallo, ich habe width und height und min-width usw schon überall ausprobiert.

          Ggf. kannst du die Links aber auch floaten lassen, musst dann aber wohl auch für jede neue Zeile (und nicht jeder deiner Links ist ja in einer neuen Zeile) clear einfügen.

          Ein float:left bewirkt tatsächlich, daß die Grafik dann korrekt umrandet wird, warum auch immer. Inwieweit ich dann noch das clear im html-body einbringen muß, habe ich noch nicht getestet.

  2. Hi,

    http://mowlog.atspace.com/

    ist das beabsichtigt, dass das leere schwarze div mit der Überschrift "MOWLog" im IE mehrere tausend px hoch ist? Ich war eben etwas irritiert, weil ich erst 14 Bildschirmseiten nach unten scrollen musste, bis der eigentliche Seiteninhalt anfängt.

    Durch die CSS Funktion background-image in Verbindung mit leerem Linktext kommt es im IE6 zu einer falschen Darstelleung des Focusrahmen,

    Das macht man ja auch nicht. Der IE verhält sich hier meiner Ansicht nach korrekt: Der Inhalt des a-Elements besteht nur aus einem Leerzeichen, und dieses Leerzeichen markiert er mit einem Focus-Rahmen.

    Mit Opera8.5, Firefox1.5 und NN7 funktioniert natürlich alles prima.

    Zufall, weil das Padding so hingetrickst ist, dass es gerade das Hintergrundbild abdeckt? Warum setzt du das Bild nicht als Inhalt des Links? Wäre das zu einfach? ;-)

    Schönen Tag noch,

    Martin

    --
    Viele Fachleute vertreten die Ansicht, jedes Feature eines Programms, das sich nicht auf Wunsch abstellen lässt, sei ein Bug.
    Außer bei Microsoft. Da ist es umgekehrt.
    1. ist das beabsichtigt, dass das leere schwarze div mit der Überschrift "MOWLog" im IE mehrere tausend px hoch ist?

      Hallo, ich kenne das vom IE 5, beim 6er wäre mir das neu. Warst du mit dem 6er dort?

      Mit Opera8.5, Firefox1.5 und NN7 funktioniert natürlich alles prima.

      Zufall, weil das Padding so hingetrickst ist, dass es gerade das Hintergrundbild abdeckt?

      Ja, richtig. Vielleicht kann ich da was mit margin für den IE hinbiegen. Möglicherweise guter Ansatz.

      »»Warum setzt du das Bild nicht als Inhalt des Links? Wäre das zu einfach?

      Das hat sich so ergeben, weil ich hinter dem Grafiklink einen einfachen Text brauche ([x pix]) und dahinter wiederum ein höherer link ist.

      1. Hallo Roje,

        ist das beabsichtigt, dass das leere schwarze div mit der Überschrift "MOWLog" im IE mehrere tausend px hoch ist?
        Hallo, ich kenne das vom IE 5, beim 6er wäre mir das neu. Warst du mit dem 6er dort?

        Nein, mit einem 5.5er - den 6er tu ich mir nicht an!

        Zufall, weil das Padding so hingetrickst ist, dass es gerade das Hintergrundbild abdeckt?
        Ja, richtig. Vielleicht kann ich da was mit margin für den IE hinbiegen. Möglicherweise guter Ansatz.

        Ich habe parallel noch eine Idee gehabt, vielleicht ist das auch eine Überlegung wert.

        Das hat sich so ergeben, weil ich hinter dem Grafiklink einen einfachen Text brauche ([x pix]) und dahinter wiederum ein höherer link ist.

        Ein "höherer" Link? Ach so, du meinst höher im Sinne der Serverstrukturen. Okay. Also letztendlich doch, damit's im Quellcode übersichtlicher aussieht?

        So long,

        Martin

        --
        Ich stehe eigentlich gern früh auf.
        Außer morgens.
    2. Hallo,

      Zufall, weil das Padding so hingetrickst ist, dass es gerade das Hintergrundbild abdeckt? Warum setzt du das Bild nicht als Inhalt des Links? Wäre das zu einfach? ;-)

      Oder, damit du nicht für jeden Link das Bild im Quellcode notieren musst:
      Formatiere den Link mit display:block; float:left; clear:left; und gib ihm dann eine eindeutige Höhe und Breite.

      So long,

      Martin

      --
      Denken ist wohl die schwerste Arbeit, die es gibt. Deshalb beschäftigen sich auch nur wenige damit.
        (Henry Ford, amerikanischer Industriepionier)
  3. Hallo nochmal, will nur schnell etwas prahlen:
    Ich habe das Problem *ohne* float gelöst!
    Für IE das letter-spacing stark vergrößert und zusätzlich ein negatives margin gesetzt. Die langen Ausläufer bei den jeweils untersten Links habe ich durch ein height:100% für jedes umschließende div beseitigt.
    Die Darstellung im IE 5 habe ich auch etwas korrigiert, ist aber immer noch nicht schön.
    Im Opera tritt nun ein neues Problem auf, dort bleibt der Focus an der Checkbox im Header hängen...