LinkBack URL
About LinkBacks
ZitierenSetzte mal b.brick mal auf display: inline-block; statt auf display: block;
Bild-Caption nur bei Hovern sichtbar: IE will nicht
Hallo!
Für eine Bild-Galerie bastele ich eine Thumbnail-Liste. Der Bild-Titel soll erst dann erscheinen, wenn der Benutzer mit dem Mauszeiger über den Thumbnail hovert.
Dazu habe ich einen <div>-Container, der den Bild-Titel enthält, auf display:none gesetzt. Erst beim hovern über den Link wird der <div>-Container auf display:inline gesetzt.
Das Problem: in FF 3 klappt das wunderbar, in Opera 9.25 auch. Nur IE 7 will nicht:Ein Link sagt mehr als tausend Worte: Hier könnt ihr das ganze in Aktion sehen und selbst testen, ob es geht.
- die Beschreibung erscheint nicht
- der Thumbnail wird unsichtbar
Weiß vielleicht jemand, woran das liegt? Was muss ich ändern, dass der IE mitspielt? Vielen Dank!
Hier der Code der Thumbnail-Liste mitsamt CSS:
HTML-Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE"> <head> <style type="text/css"> div.user_hover { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; padding-top: 25px; padding-left: 8px; display: none; z-index: 10; text-align: left; font-style: normal; font-variant: normal; font-weight: bold; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; /* opacity: 0.8; */ } span.caption { background-color: white; color: #333; font-weight: bold; font-size: 90%; padding: 2px; font-family: Georgia; line-height: 140%; } a.brick { display: block; list-style-type: none; overflow: hidden; font-style: normal; -x-system-font: none; position: relative; text-decoration: none; } a.brick:hover { cursor: pointer; overflow: visible; z-index: 11; } a.brick:hover div.user_hover { display: inline; } div#thumblistcont { max-width: 800px; text-align: left; position: absolute; left: 50%; clear: both; margin: 50px 0 0 -400px; } img { border: 0; } </style> <title>Test: Hover-Effekt in Thumbnail-Liste</title> </head> <body> <div id="thumblistcont"> <ul style="list-style: none; display: inline;" class="month_archive"> <li style="display: block; float:left; list-style-type:none; padding:6px"> <a class="brick" href="bild_seite_1.htm"> <img src="thumb1.jpeg" width="120" height="120" alt="Lobster Monster" /> <div class="user_hover"> <span class="caption">Wagen</span> </div> </a> </li> <li style="display: block; float:left; list-style-type:none; padding:6px"> <a class="brick" href="bild_seite_2.htm"> <img src="thumb2.jpeg" width="120" height="120" alt="Rima" /> <div class="user_hover"> <span class="caption">Gras</span> </div> </a> </li> <li style="display: block; float:left; list-style-type:none; padding:6px"> <a class="brick" href="bild_seite_3.htm"> <img src="thumb3.jpeg" width="120" height="120" alt="Möwe, Welle" /> <div class="user_hover"> <span class="caption">Band</span> </div> </a> </li> </ul> </div> </body> </html>
Geändert von Karstatt (22.10.2008 um 17:45 Uhr) Grund: habe die Problembeschreibung präzisiert
Setzte mal b.brick mal auf display: inline-block; statt auf display: block;
Super, das klappt! Vielen Dank, Mark.
Versteht der IE nur inline-block oder was war das Problem?
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
