zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Galerie: a:hover img flackert beim Firefox

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.06.2009, 07:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2009
Beiträge: 5
benpen befindet sich auf einem aufstrebenden Ast
Standard 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; 

  }
}
Im Safari funktioniert es super. Im Firefox flackern die Thambnails und nur bei Klick erscheint das Bild in groß.

Hier ein Link.

Könnte mir da jemand behilflich sein. Wäre super.

Benni
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.06.2009, 12:11
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von benpen Beitrag anzeigen
Im Safari funktioniert es super.
Natürlich, weil der den vermeintlichen "Opera-Hack" liest.

Zitat:
Zitat von benpen Beitrag anzeigen
Im Firefox flackern die Thambnails
Weil Du sie beim Hovern unter das erste Bild schiebst, und dann kommen sie zurück, weil sie ja nicht mehr gehovert werden, und wieder von vorn...

Zitat:
Zitat von benpen Beitrag anzeigen
nur bei Klick erscheint das Bild in groß.
Weil Du bei active/focus endlich das tust, was nötig ist, während z.B. Opera und Safari dies durch Deinen "Hack" immer bekommen, d.h. im Gegensatz zum FX eben auch bei hover.
__________________
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.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.06.2009, 13:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2009
Beiträge: 5
benpen befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Natürlich, weil der den vermeintlichen "Opera-Hack" liest.
Sollte ich denn den Hack rausnehmen?



Zitat:
Zitat von heiko_rs Beitrag anzeigen
Weil Du sie beim Hovern unter das erste Bild schiebst, und dann kommen sie zurück, weil sie ja nicht mehr gehovert werden, und wieder von vorn...
Und wie kann ich das ändern? position:absolut? (Ich kann es grad nicht testen)


Zitat:
Zitat von heiko_rs Beitrag anzeigen
Weil Du bei active/focus endlich das tust, was nötig ist, während z.B. Opera und Safari dies durch Deinen "Hack" immer bekommen, d.h. im Gegensatz zum FX eben auch bei hover.
Also geht es bei FX gar nicht mit hover sondern nur mit klick?
Mit Zitat antworten
  #4 (permalink)  
Alt 23.06.2009, 14:01
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Zitat:
Zitat von benpen Beitrag anzeigen
Also geht es bei FX gar nicht mit hover sondern nur mit klick?
Doch, du musst ihm nur auch die anweisung geben die Safari und Opera per Hack bekommen
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #5 (permalink)  
Alt 23.06.2009, 14:07
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von benpen Beitrag anzeigen
Sollte ich denn den Hack rausnehmen?
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.

Zitat:
Zitat von benpen Beitrag anzeigen
Also geht es bei FX gar nicht mit hover sondern nur mit klick?
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.)
Mit Zitat antworten
  #6 (permalink)  
Alt 24.06.2009, 07:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2009
Beiträge: 5
benpen befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank! Ihr habt mir sehr geholfen
Mit Zitat antworten
Antwort


Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:45 Uhr.