Michael S.: Artefakte bei ein-/ausblenden über visible/display

Ich hab in einer Seite ein Paar Infoboxen eingebaut, die über die visible-eigenschaft beim hovern von links sichtbar werden. Bei IE benutzt man halt display. Alles funktioniert auch wunderbar, jedoch nicht wenn man in diese "unsichtbare" Infobox versucht Tabellen reinzupacken. Seltsamerweise verschwinden beim IE sämtliche Elemente der Infobox, sobald man die Maus wegnimmt, jedoch nicht der Rahmen der Tabelle. Bei FF & Opera funktioniert alles wunderbar.

Der Style für die ganze geschichte sieht so aus:

<!--[if IE 5]><style type="text/css">
  a.infobox div { display:none; }
  a.infobox:hover div { display:block; }
</style><![endif]-->

<style type="text/css">
a.infobox div
{
    visibility:hidden;
    position:absolute;

left:16em;
    margin-top: 0px;

margin-top:1.5em;
    padding:1em;
    text-decoration:none;
    width: 500px;
}

a.infobox:hover div
{
    visibility:visible;
    border:1px dotted #666666;
    color:blue;
    background:white;
    filter:alpha(opacity=90);
    -moz-opacity:.90;
    opacity:.90;
}
</style>

Hab ursprünglich keine <div>-Elemente, sondern spans benutzt. Wurde dann von der Gemeinde wüst dafür beschimpft und habs abgeändert -.-

Hat jemand eine Idee was ich anstellen könnte, damit beim IE die Tabellen(Rahmen) genauso verschwinden wie bei den anderen Browsern?

mfg
Micha

  1. hi,

    Alles funktioniert auch wunderbar, jedoch nicht wenn man in diese "unsichtbare" Infobox versucht Tabellen reinzupacken.

    Die haben da ja auch nichts verloren.

    Hab ursprünglich keine <div>-Elemente, sondern spans benutzt. Wurde dann von der Gemeinde wüst dafür beschimpft und habs abgeändert -.-

    Von welcher "Gemeinde"?

    Weder Div noch Table sind in A erlaubt.

    Hat jemand eine Idee was ich anstellen könnte, damit beim IE die Tabellen(Rahmen) genauso verschwinden wie bei den anderen Browsern?

    Nutze entweder (Inline-) Elemente, die in A erlaubt sind zur Auszeichnung deiner Daten - oder greife auf eine andere Möglichkeit zurück, die kein A erfordert (also bspw. irgendein anderes Element, für welches du dann für :hover entsprechende Formatierungen angibst plus einen fähigen Browser, bzw. einen Javascript-Workaround dafür für den unfähigen Browser).

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Naja, was in A erlaubt ist, und was man in A reinpacken kann sind zwei verschiedene Sachen. Hast du evtl. ne Idee wie das "Workaround" mit Javascript aussehen soll?

      mfg
      Micha

      1. Hi,

        Naja, was in A erlaubt ist, und was man in A reinpacken kann sind zwei verschiedene Sachen.

        sicher doch, Du kannst auch ein Bett in A packen, nur kriegst Du dann garantiert nichts Sinnvolles[1]. Invaliden Code zu schreiben (oder es so hinzutricksen, dass es valide _wirkt_) hat sich jedenfalls noch nie als hilfreich erwiesen.

        Hast du evtl. ne Idee wie das "Workaround" mit Javascript aussehen soll?

        Bilde (für den besagten, einen Browser) mit JavaScript das nach, was seit 1998 mit :hover gehen soll.

        Cheatah

        [1] Anwesende Bettinas natürlich ausgeschlossen.

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Hi,

          [1] Anwesende Bettinas natürlich ausgeschlossen.

          Ist Bettina nicht case-sensitiv?
          ;-)

          Gruesse, Joachim

          --
          Am Ende wird alles gut.
          1. Hi,

            [1] Anwesende Bettinas natürlich ausgeschlossen.
            Ist Bettina nicht case-sensitiv?

            nach meiner Erfahrung sind Bettinas insbesondere dann case-sensitive, wenn es sich bei dem case um eine Handtasche handelt ;-)

            Cheatah

            --
            X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
            X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
            X-Will-Answer-Email: No
            X-Please-Search-Archive-First: Absolutely Yes
            1. Hi,

              nach meiner Erfahrung sind Bettinas insbesondere dann case-sensitive, wenn es sich bei dem case um eine Handtasche handelt

              sicher vor allem wenn case {display:none}, oder?
              ;-)

              Gruesse, Joachim

              --
              Am Ende wird alles gut.
              1. Hello out there!

                nach meiner Erfahrung sind Bettinas insbesondere dann case-sensitive, wenn es sich bei dem case um eine Handtasche handelt
                sicher vor allem wenn case {display:none}, oder?

                case {visibility: hidden} reicht auch schon, sogar case {content: none}.

                See ya up the road,
                Gunnar

                --
                “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
  2. hi,

    das du Probleme mit dem Verpacken von Tabellen in Links hast, hattest du übrigens bereits angesprochen (und dich auch bereits unbelehrbar gezeigt gegenüber Hinweisen, dass das HTMurksL ist).

    Unterlasse bitte künftig solche Doppelpostings.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }