|
|||
CSS Galerie: a:hover img flackert beim Firefox
Hallo,
hab mir hier ein Galerie zusammen geschustert: Code:
<ul id="gallery"> <li><a href="#nogo"> <img src="../pict_gvs/pauli_sohn/387x345/pic9674_h.jpg" alt="#1" title="#1" /></a></li> <li><a href="#nogo"> <img src="../pict_gvs/pauli_sohn/387x345/pic9666_h.jpg" alt="#2" title="#2" /></a></li> <li><a href="#nogo"> <img src="../pict_gvs/pauli_sohn/387x345/pic9656_h.jpg" alt="#3" title="#3" /></a></li> <li><a href="#nogo"> <img src="../pict_gvs/pauli_sohn/387x345/pic13422_h.jpg" alt="#4" title="#4" /></a></li> <li><a href="#nogo"> <img src="../pict_gvs/pauli_sohn/387x345/pic9667_h.jpg" alt="#1" title="#1" /></a></li> <li><a href="#nogo"> <img src="../pict_gvs/pauli_sohn/387x345/pic9676_h.jpg" alt="#2" title="#2" /></a></li> </ul> Code:
ul#gallery { padding:0; margin:0; width:390px; height:394px; position: relative; background:transparent; float:left; margin-right:15px; } #gallery li { list-style-type:none; width:65px; height:48px; float:left; z-index:100; border:none; } #gallery a { position:relative; width:65px; height:48px; display:block; float:left; z-index:100; cursor:default; border:none; } #gallery a img { position:relative; width:62px; height:46px; border-right:3px solid #fff; border-bottom:3px solid #fff; border-left:none; border-top:none; z-index:100; } #gallery a:hover { position:absolute; left:0; top:0; z-index:20; } #gallery a:hover img { background:transparent; position:relative; border:0; z-index:20; } #gallery a:active, #gallery a:focus { background:transparent; width:390px; height:394px; padding:49px 0px; position:absolute; left:0; top:0; z-index:10; } #gallery a:active img, #gallery a:focus img { background:transparent; position:relative; width:387px; height:345px; border:0; z-index:10; } /* hack for Internet Explorer */ #gallery li.pad { height:0; display:block; margin-top:-2px; width:387px; font-size:0; } /* hack for Opera 7+ */ @media all and (min-width:0px){ #gallery a:hover { background:transparent; width:387px; height:245px; padding:49px 0px; position:absolute; left:0; top:0; z-index:10; } #gallery a:hover img { background:transparent; position:relative; width:387px; height:345px; border:0; z-index:10; border-right:3px solid #fff; } } Hier ein Link. Könnte mir da jemand behilflich sein. Wäre super. Benni |
Sponsored Links |
Sponsored Links |
|
|||
Sollte ich denn den Hack rausnehmen?
Zitat:
Also geht es bei FX gar nicht mit hover sondern nur mit klick? |
|
||||
Ja, zumal er ja auch nur Deklarationen wiederholt, die Du eh bereits vorher gemacht hast - nur halt mit anderen Selektoren. Wirf ihn raus und füge bei active/focus auch hover hinzu (sowohl für a als auch img). Die beiden separaten hover-Regeln können dann auch raus.
Natürlich (um das zu erkennen, musst Du Dir nur die Regeln für hover sowie active/focus ansehen).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 12:25 |
Benötige dringend Hilfe mit CSS in Firefox & IE :( | r4m0n | CSS | 3 | 20.03.2009 11:12 |
IE und Firefox - CSS nicht korrekt | wolf1985 | CSS | 5 | 29.04.2008 12:07 |
#boxes a:hover.info: 2.posting mit css !!! | marioN | CSS | 5 | 25.01.2004 17:04 |
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, | marioN | CSS | 2 | 19.01.2004 17:17 |