Inga: Firefox, Rahmen um Bilder und Pseudoklassen für Verweise

Hallo

Möchte Rahmen um Bilder bei mouseover highlighten, das ganze trivial mit css und a:hover. Firefox macht Probleme. Siehe da:

http://www.webeifer.de/test.html

Habe ich einen Denkfehler? Muss doch gehen!

Danke für Eure Mühe
Inga

  1. Hallo Inga.

    Möchte Rahmen um Bilder bei mouseover highlighten, das ganze trivial mit css und a:hover. Firefox macht Probleme. Siehe da:

    Wenn das Problem darin besteht, dass Firefox beim Hovern die Rahmenfarbe auf giftgrün wechselt, dann macht er tatsächlich welche. ;)

    http://www.webeifer.de/test.html - Zur Info: </faq/#Q-19>, Dankeschön.

    Habe ich einen Denkfehler? Muss doch gehen!

    Tut es das bei dir nicht..?

    Gruß, Ashura

    --
    Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
    Try it: Become an Opera Lover in 30 days
  2. Hi,

    Habe ich einen Denkfehler? Muss doch gehen!

    mehrere. <div id="Layer1" ist unnütz und die absolute Positionierung möglicherweise problematisch.
    Und wenn Du einen Rahmen um das Bild willst, solltest Du auch img ansprechen und nicht a, also
    a.test:hover img{}.

    freundliche Grüße
    Ingo

    1. Hallo Ingo

      a.test:hover img{}.

      Womit dann allerdings unser geliebter IE überfordert sein dürfte.

      Auf Wiederlesen
      Detlef

      --
      - Wissen ist gut
      - Können ist besser
      - aber das Beste und Interessanteste ist der Weg dahin!
      1. Hi,

        a.test:hover img{}.

        Womit dann allerdings unser geliebter IE überfordert sein dürfte.

        nö. Wie kommst Du darauf? Selbst der IE kann :hover auf Links anwenden.

        freundliche Grüße
        Ingo

        1. Hallo,

          Hi,

          a.test:hover img{}.

          Womit dann allerdings unser geliebter IE überfordert sein dürfte.
          nö. Wie kommst Du darauf? Selbst der IE kann :hover auf Links anwenden.

          Mit a:hover hat er keine Probleme, oft aber damit, die Eigenschaften von Elementen
          im Link beim hovern desselben zu ändern.

          Auf Wiederlesen
          Detlef

          --
          - Wissen ist gut
          - Können ist besser
          - aber das Beste und Interessanteste ist der Weg dahin!
          1. Hi,

            Mit a:hover hat er keine Probleme, oft aber damit, die Eigenschaften von Elementen
            im Link beim hovern desselben zu ändern.

            aber nicht wie in diesem Fall mit:

            a.test img { padding:10px; border: 1px solid #c39; }
            a.test:hover img { border-color: #0e0; }

            freundliche Grüße
            Ingo

            1. Hallo Ingo

              aber nicht wie in diesem Fall mit:

              a.test img { padding:10px; border: 1px solid #c39; }
              a.test:hover img { border-color: #0e0; }

              Verwendest du eine persönliche IE-Superversion, oder ist mein IE 6.0 unter W 98
              besonders blöd?
              Ich hätte dir doch nie widersprochen, ohne es vorher getestet zu haben. ;-)

                
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
              <html>  
                <head>  
                  <title>New Document</title>  
                  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">  
                  <style type="text/css">  
              a.test img { padding:10px; border: 1px solid #c39; }  
              a.test:hover img { border-color: #0e0; }  
                  </style>  
                </head>  
                <body>  
                  <p>  
                    <a class="test" href="#"><img src="meinbild.gif" alt=""></a>  
                  </p>  
                </body>  
              </html>  
              
              

              Bei diesem Quelltext wird in meinem IE nichts sichtbar gehovert.

              Auf Wiederlesen
              Detlef

              --
              - Wissen ist gut
              - Können ist besser
              - aber das Beste und Interessanteste ist der Weg dahin!
              1. Hi,

                Ich hätte dir doch nie widersprochen, ohne es vorher getestet zu haben. ;-)

                *g*

                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
                <html>
                  <head>
                    <title>New Document</title>
                    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
                    <style type="text/css">
                a.test img { padding:10px; border: 1px solid #c39; }
                a.test:hover img { border-color: #0e0; }
                    </style>
                  </head>
                  <body>
                    <p>
                      <a class="test" href="#"><img src="meinbild.gif" alt=""></a>
                    </p>
                  </body>
                </html>

                
                >   
                > Bei diesem Quelltext wird in meinem IE nichts sichtbar gehovert.  
                  
                ich habe exakt diesen Code (nur mit einem bei mir vorhandenen Bild) in eine Datei kopiert und mein IE 6.0.2800.1106.xpsp2.030422-1633 (wieso steht hier eigentlich xpsp2, wo ich sp2 doch noch gar nicht intalliert habe?) zeigt um das Bild im Abstand von 10px einen lila Rahmen, der beim hovern grün wird.  
                Und mein IE 5.5 sowie 5.01 zeigen Rahmen und Farbwechsel ebenfalls an, nur ohne padding.  
                  
                freundliche Grüße  
                Ingo
                
                -- 
                [[barrierefreie Webseitenerstellung](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html)] ([Tanzschritte gesucht?](http://www.1ngo.de/tanz/);-)
                
                1. Hallo Ingo

                  ich habe exakt diesen Code (nur mit einem bei mir vorhandenen Bild) in eine Datei kopiert und mein IE 6.0.2800.1106.xpsp2.030422-1633 (wieso steht hier eigentlich xpsp2, wo ich sp2 doch noch gar nicht intalliert habe?) zeigt um das Bild im Abstand von 10px einen lila Rahmen, der beim hovern grün wird.

                  Seltsam - seltsam, die Wege des IE sind unergründlich.
                  Mein IE 6.0.2800.1106 (und ein ganzer Sack Updateversionen) ändert beim
                  hovern nicht die Rahmenfarbe, es sei denn:

                  Ich füge weitere Links in die Seite ein und bewege den Mauszeiger schnell
                  von einem dieser Links zum Bild.
                  (übrigens, interessanter Effekt: wenn ich das Bild dann in eine andere
                  Richtung verlasse, bleibt der Rahmen grün.)

                  oder:

                  Ich füge noch a.test:hover { color: #0e0; } ein, und es funktioniert wie gewünscht.
                  Dabei spielt es keine Rolle, welche Farbe angegeben wird, nichteinmal,
                  welche Eigenschaft dort definiert wird. Wichtig ist nur, dass dort etwas geändert wird.

                  Auf Wiederlesen
                  Detlef

                  --
                  - Wissen ist gut
                  - Können ist besser
                  - aber das Beste und Interessanteste ist der Weg dahin!
                  1. Hi,

                    Seltsam - seltsam, die Wege des IE sind unergründlich.
                    Mein IE 6.0.2800.1106 (und ein ganzer Sack Updateversionen) ändert beim
                    hovern nicht die Rahmenfarbe

                    tja, diesen "Sack" habe ich auch, aber vielleicht ist der bei mir etwas anders gefüllt? ;-)

                    freundliche Grüße
                    Ingo

                  2. hi,

                    Ich füge noch a.test:hover { color: #0e0; } ein, und es funktioniert wie gewünscht.
                    Dabei spielt es keine Rolle, welche Farbe angegeben wird, nichteinmal,
                    welche Eigenschaft dort definiert wird. Wichtig ist nur, dass dort etwas geändert wird.

                    ja, so ist das mit dem IE manchmal ...

                    wie hier https://forum.selfhtml.org/?t=104801&m=646899 letztlich schon mal erwähnt:

                    damit der IE veränderte formatierungen für elemente unterhalb von a:hover umsetzt, muss man oftmals dafür sorgen, dass sich auch für den link selber im hover-zustand etwas "ändert" - das gibt dem IE dann quasi noch mal den nötigen extra-tritt in den hintern, noch mal über die situation "nachzudenken", ob das im link enthaltene elemente jetzt nicht vielleicht auch anders dargestellt werden muss.

                    dabei reicht es idR. schon, beispielsweise einen farbcode wie #ffffff auf die kurzschreibweise #fff zu "ändern" (egal, ob color/background-color/border-color) - hauptsache, die rendering engine des IE bekommt irgendeine "veränderung" vorgesetzt, die es umzusetzen gilt - um damit auch nochmal über eine aktualisierung der anzeige der nachfahrenelemente "nachzudenken" ...

                    gruß,
                    wahsaga

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

    Habe ich einen Denkfehler? Muss doch gehen!

    Wenn das Bild verlinkt sein soll, und du den Hovereffekt für den Link brauchst,
    dann kannst du diesem display:block und wenn nötig, eine passende Breite und/oder
    Höhe geben.

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    1. Hallo Detlef

      dann kannst du diesem display:block ...

      das war der richtige Tip, danke

      Inga