kleinwoelfchen: CSS Infobox

Hallo,

ich habe ein kleines Problem mit der Infobox welche hier bei Self HTML beschrieben wird.
--> http://aktuell.de.selfhtml.org/artikel/css/infobox/#beispiel3

Ich habe das Beispiel in meiner Webseite eingebaut und ein klein wenig angepaßt (Position und Größe).

Nun wird folgende Seite -->  http://www.black-coons.de/bc/index.php?request=Balou im Firefox so dargestellt wie es sein sollte, während im IE keine Infobox erscheint.

Im Moment bin ich absolut ratlos wo mein Fehler liegt.

MfG
kleinwoelfchen

  1. hallo,

    Ich habe das Beispiel in meiner Webseite eingebaut und ein klein wenig angepaßt (Position und Größe).

    Du hast etwas übersehen. Auch das von dir angegebene Beispiel funktioniert im IE6 nicht. Aber Beispiel2 funktioniert. Schau dir genau an, worin der Trick liegt, mit dem man diesen Hover-Effekt auch für IE6 nutzbar machen kann.

    Grüße aus Berlin

    Christoph S.

    --
    Visitenkarte
    ss:| zu:) ls:& fo:) va:) sh:| rl:|
    1. hallo,

      Ich habe das Beispiel in meiner Webseite eingebaut und ein klein wenig angepaßt (Position und Größe).

      Du hast etwas übersehen. Auch das von dir angegebene Beispiel funktioniert im IE6 nicht. Aber Beispiel2 funktioniert. Schau dir genau an, worin der Trick liegt, mit dem man diesen Hover-Effekt auch für IE6 nutzbar machen kann.

      Grüße aus Berlin

      Christoph S.

      Hallo Christoph,

      das Beispiel funktionierte bei mir mit beiden Browsern, da ich den IE7 aufgespielt habe. Mit 6 funktioniert es tatsächlich nicht. Trotzalledem klappte es auf meiner Seite trotz IE7 nicht ... das irritierte mich eben.

      Leider bin ich seit 2002 oder länger nichtmehr am "basteln" gewesen und deswegen ist css und co alles noch relatives Neuland für mich.

      Hier ist der Code (hätte ich auch in den ersten Post packen können *schäm*)

      <style type="text/css">
      <!--
      img {
      border:none;
      }

      #box{
      height:96px;
      width:128px;

      border:1px solid black;
      font:bold 14px verdana, sans-serif;}

      #box div{display:none;}

      #box:hover div{
      display:block;
      width:320px;
      position:fixed;top:150px;right:20px;
      border:1px dashed #FFEAC6;
      padding:15px;}
      -->
      </style>

      und hier dann entsprechend der Rest ...

      <div id="box"><a href="pic/bilder/a1wurf/01_1.jpg" target="_blank" ><img src="pic/bilder/a1wurf/01_3.jpg" width="128" height="96" alt="Balou&Emily"></a>
       <div>
       <p><strong>Balou vs. Telefon</strong></p>
       <p><img src="pic/bilder/a1wurf/01_2.jpg" width="320" height="240" alt="Balou vs. Telefon"></p>
       <p>Text</p>
       </div>
      </div>

      Dann werde ich wohl Beispiel 2 mal genauer unter die "Lupe" nehmen und damit mein Glück versuchen.

      1. hallo,

        #box:hover div

        Das genügt eben für IE6 nicht. Ich bat dich, dir das angeführte Beispiel 2 genau anzuschauen, du kommst schon drauf, was da anders ist.

        Grüße aus Berlin

        Christoph S.

        --
        Visitenkarte
        ss:| zu:) ls:& fo:) va:) sh:| rl:|
        1. hallo,

          #box:hover div

          Das genügt eben für IE6 nicht. Ich bat dich, dir das angeführte Beispiel 2 genau anzuschauen, du kommst schon drauf, was da anders ist.

          Grüße aus Berlin

          Christoph S.

          Hallo Christoph,

          ich habe das ganze nun umgebaut und auf Beispiel 2 ausgelegt und es klappt "teilweise" im IE7. Das Infofenster wird nun angezeigt wo es soll, jedoch habe ich nun das Problem, das der Befehl position:fixed nicht so funktioniert wie er soll. mit position:absolute erscheint das Fenster dort wo es soll, mit position:fixed wird die Box direkt unter den link gehängt und nicht an die vorgegebene Stelle positioniert.
          Für mich ist es aber wichtig, das sie mitscrollt.

          MfG
          kleinwoelfchen

          PS: Siehe Beispiel URL oben. Mit Firefox wie es sein soll. Mit dem IE7 wird es vermurkst.

          1. hallo,

            ich habe das ganze nun umgebaut und auf Beispiel 2 ausgelegt und es klappt "teilweise" im IE7. Das Infofenster wird nun angezeigt wo es soll, jedoch habe ich nun das Problem, das der Befehl position:fixed nicht so funktioniert wie er soll.

            Wozu hat man SELFHTML, wenn es nicht gelesen wird? Bitte auch das "Beachten Sie" beachten.

            Du hast also ein Teil, das IE6 nicht konnte, ersetzt und ein zweites Teil jetzt hineinverbessert, was beide IE nicht richtig können.

            Grüße aus Berlin

            Christoph S.

            --
            Visitenkarte
            ss:| zu:) ls:& fo:) va:) sh:| rl:|
            1. Wozu hat man SELFHTML, wenn es nicht gelesen wird? Bitte auch das "Beachten Sie" beachten.

              Du hast also ein Teil, das IE6 nicht konnte, ersetzt und ein zweites Teil jetzt hineinverbessert, was beide IE nicht richtig können.

              Grüße aus Berlin

              Christoph S.

              Hallo Christoph,

              ja auf der Seite war ich vorher gewesen und muß zugeben ... "ich hab den Wald vor Bäumen nicht gesehen". Gibt es denn irgendeine Alternative zu "fixed"?
              Ich werfe den ganzen Mist gleich über Bord und mache eine ganz normale 08/15 hat jeder Seite *grummel*

              MfG
              kleinwoelfchen

              1. Hallo,

                nach wie vor, versuchst du dein CSS auf invalidem HTML aufzubauen. In einem Document darf eine ID nur einmal vorkommen, hätte dir bestimmt der Validator angezeigt.

                Gruß plan_B

                --
                     *®*´¯`·.¸¸.·
          2. Hi,

            PS: Siehe Beispiel URL oben. Mit Firefox wie es sein soll. Mit dem IE7 wird es vermurkst.

            Diese Seite muss der IE7 leider so darstellen wie seine Vorgänger, weil Du keinen entsprechenden DOCTYPE angegeben hast.

            freundliche Grüße
            Ingo

  2. Hallo,

    befrage auch mal den http://validator.w3.org/Validator

    Gruß plan_B

    --
         *®*´¯`·.¸¸.·
    1. hallo,

      befrage auch mal den http://validator.w3.org/Validator

      _Der_ wird zwar allerhand finden, aber selbst wenn die Fehler alle ausgebügelt würden, würde immer noch im IE6 nichts passieren. Es gibt auch einen CSS-Validator, aber für die vorgestellte Frage findet der auch keine Lösung.

      Grüße aus Berlin

      Christoph S.

      --
      Visitenkarte
      ss:| zu:) ls:& fo:) va:) sh:| rl:|
      1. Hallo,

        befrage auch mal den http://validator.w3.org/Validator

        _Der_ wird zwar allerhand finden, aber ...

        ich habe mein vorbereitetes Posting einfach halbiert, als ich deine Antwort gelesen habe. Als Zusatz schien es mir sinnvoll genug.

        Gruß plan_B

        --
             *®*´¯`·.¸¸.·