Hover Container mit position:absolute verstecken/zeigen

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • 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 ????

    Source Code

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


    Source Code

    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>
    Images
    • firefox.jpg

      30.1 kB, 779×580, viewed 161 times
    • ie.jpg

      26.8 kB, 739×484, viewed 132 times
  • 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:

    Source Code

    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)

    Source Code

    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.