Hover Container mit position:absolute verstecken/zeigen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Hover Container mit position:absolute verstecken/zeigen

    Hallo,
    ich habe auch mal eine Frage zu dem z-index wenn es daran liegen sollte.

    im Firefox sind die Hover Bilder genau da wo ich sich hben möchte und der IE setzt mir die Hover Bilder zu hoch.

    könnte mir bitte jamnd sagen wiei ch das im IE genauso hinbekomme wie im Firefox, die Bilder müßen ein bisschen tiefer im IE ????

    Quellcode

    1. .thumbnail{
    2. position: relative;
    3. z-index: 0;
    4. }
    6. .thumbnail:hover{
    7. background-color: transparent;
    8. z-index: 50;
    9. top: -20px;
    11. margin-bottom: 100px;
    12. }
    14. .thumbnail span{ /*CSS for enlarged image*/
    15. position: absolute;
    16. background-color: lightyellow;
    17. padding: 5px;
    18. left: -1000px;
    19. border: 1px dashed gray;
    20. visibility: hidden;
    21. color: black;
    22. text-decoration: none;
    23. }
    25. .thumbnail span img{ /*CSS for enlarged image*/
    26. border-width: 0;
    27. padding: 2px;
    28. }
    30. .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    31. visibility: visible;
    32. top: 20px;
    33. left: 0; /*position where enlarged image should offset horizontally */
    34. }
    Alles anzeigen


    Quellcode

    1. <td align="center">
    2. <a class="thumbnail" href="#thumb"><img src="00.jpg" width="100px" height="100px" border="0" /><span><img src="00.jpg" /><br />Text123</span></a>
    3. <a class="thumbnail" href="#thumb"><img src="01.jpg" width="100px" height="100px" border="0" /><span><img src="01.jpg" /><br />Text456</span></a>
    4. <a class="thumbnail" href="#thumb"><img src="00.jpg" width="100px" height="100px" border="0" /><span><img src="00.jpg" /><br />Text789</span></a>
    5. <a class="thumbnail" href="#thumb"><img src="01.jpg" width="100px" height="100px" border="0" /><span><img src="01.jpg" /><br />ein ganz langer Text und dieser Text</span></a>
    6. <a class="thumbnail" href="#thumb"><img src="00.jpg" width="100px" height="100px" border="0" /><span><img src="00.jpg" /><br />und noch ein ganz langer Text und dieser Text</span></a>
    7. <a class="thumbnail" href="#thumb"><img src="01.jpg" width="100px" height="100px" border="0" /><span><img src="01.jpg" /><br />schon wieder ein ganz langer Text und dieser Text</span></a>
    8. </td>
    Bilder

    • firefox.jpg

      30,1 kB, 779×580, 540 mal angesehen

    • ie.jpg

      26,8 kB, 739×484, 378 mal angesehen

  • Wenn man beginnt auf Probleme zu stoßen, die vom Browser abhängen, sollte man erstmal sicherstellen, dass die Seite XHTML konform ist, siehe dazu validator.w3.org

    die Attribute width und height sind zum einen veraltet, zum anderen für numerische Werte gedacht.
    Verwende besser CSS:

    Quellcode

    1. .thumbnail img {
    2. width:100px;
    3. height:100px;
    4. border:0;
    5. }


    Nun hat das aber nichts mit deinem Problem zu tun ;)

    Ich habe mal darüber nachgedacht - du verwendest das <a> zum hovern, weil man andere Elemente nicht mit IE(<7) hovern kann.
    Nun platzierst du innerhalb des <a> Containers weitere Container. Das <a> Elemente (genau wie das span) Element ist im Gegensatz zum DIV Element ein Inline Element (das DIV ist ein Blockelement).

    Das verstößt also gegen (meine) Regel. Platziere keine anderen Container in Inline Elemente - das führt nur zu Problemen.
    Mache das a Element mal zu einem Blockelement (und ersetze das span am besten gleich durch ein div)

    Quellcode

    1. .thumbnail{
    2. display:block;
    3. float:left;
    4. }


    Jetzt erhältst du im Firefox die selbe "falsche" Darstellung wie im Internet Explorer.
    Ich bin der Meinung der Internet Explorer stellt hier die richtige Version da.
    Jetzt hast du einen Anhangspunkt wie du ohne Workaround auf beiden Browsern die selbe Lösung hinbekommst.
    Den Rest schaffst du bestimmt alleine.

    Ach mit dem z-index hat das alles nicht zu tun - ich habe dir einen neuen Thread erstellt.