✔ Hover-Effekt Pixelunterschied Mozilla 3 und 2

[lili222]

Hallo liebes Forum,

und wieder ein Problem:
habe einen hover-Effekt, dass wenn man auf ein Vorschaubild geht, ein großes drüber angezeigt wird. Dahinter steht immer ein Bild fest (kann man das ausblenden beim hover mit dem Code?)
Leider hat Mozilla 3 ein Pixel Unterschied, so dass es beim hovern ein wenig ruckelt.
Beim Mozilla 2 passt es.
Was kann ich tun?

http://www.prelude710.com/prelude_trumpet.html

Liebe Grüße und Danke!
Lili

 

[Maik]

Hi,

ich bin bislang noch nicht dahinter gestiegen, was hier die Ursache ist.

Aber hast du das Ganze auch mal im Quervergleich im Opera- und Safari-Browser betrachtet?

Im Opera 9.6 ist die Verschiebung weitaus drastischer, wie in FF3.5.x, und orientiert sich nach rechts unten, Safari hingegen verschiebt das Bild nach links unten.

mfg Maik

 

[lili222]

Ja der aktuellste Opera reagiert gar nicht auf mein CSS, der vorherige jedoch schon...
Und Mozilla kann ich ja nicht getrennt nach 2er und 3er Version ansprechen, oder doch?

Das ist zum Verzweifeln....

 

[Maik]

Ja der aktuellste Opera reagiert gar nicht auf mein CSS, der vorherige jedoch schon...

Der aktuelle Opera 10.10 (WinXP) nimmt bei mir den Bildertausch vor, nur eben auch fehlerhaft - dafür aber nicht so extrem, wie die 9.6-Version, die die Bilder um 10px nach rechts und unten versetzt anzeigt.

mfg Maik

 

[Maik]

Da die Darstellungsunterschiede in den einzelnen Browser(versionen) so eklatant sind, dass dem nicht so einfach zu begegnen ist, hab ich mich alternativ ein wenig in Stu Nicholls' Photo galleries umgeschaut, und aus dem Demo Click gallery for slow connections die Variante "Thumbnails at bottom" als Arbeitsvorlage herangezogen.

Das Stylesheet hab ich insofern umgeschrieben, damit die Bilder nun nicht beim Klicken der Links gezeigt werden, und im zweiten Schritt die Dimensionen und Positionsangaben auf deine Seitenverhältnisse und Bildgrößen angepasst.

Einen Pixelunterschied kann ich hiermit im FF2.x und FF3.x nicht mehr registrieren, ebenso stellen Opera und Safari den Bildertausch nun korrekt dar.

<table cellspacing="0" cellpadding="0" border="0">
       <tr>
           <td valign="top">
               <div id="container_bottom">
                    <div class="thumbs">
                         <a class="gallery slidea" href="#nogo"><em><img src="http://www.prelude710.com/fileadmin/prelude/img/content/tr710_1_gr.jpg" alt="" /></em></a>
                         <a class="gallery slideb" href="#nogo"><em><img src="http://www.prelude710.com/fileadmin/prelude/img/content/tr710_2_gr.jpg" alt=""  /></em></a>
                         <a class="gallery slidec" href="#nogo"><em><img src="http://www.prelude710.com/fileadmin/prelude/img/content/tr710_3_gr.jpg" alt=""  /></em></a>
                         <a class="gallery slided" href="#nogo"><em><img src="http://www.prelude710.com/fileadmin/prelude/img/content/tr710_4_gr.jpg" alt=""   /></em></a>
                    </div>
               </div>
           </td>
           <td width="10">&nbsp;</td>
           <td valign="top">
               ...
           </td>
       </tr>
</table>

a.gallery, a.gallery:visited {display:block; display:inline-block; text-decoration:none; width:69px; height:84px; float:left;  z-index:50;}
a.slidea {background:url(http://www.prelude710.com/fileadmin/prelude/img/content/tr710_1_kl.jpg); margin-right:3px; }
a.slideb {background:url(http://www.prelude710.com/fileadmin/prelude/img/content/tr710_2_kl.jpg); margin-right:3px;}
a.slidec {background:url(http://www.prelude710.com/fileadmin/prelude/img/content/tr710_3_kl.jpg); margin-right:3px;}
a.slided {background:url(http://www.prelude710.com/fileadmin/prelude/img/content/tr710_4_kl.jpg);}
a.gallery em, a.gallery span {display:none;}

/* styling for BOTTOM gallery */
#container_bottom {position:relative; width:285px; height:480px; background:url(http://www.prelude710.com/fileadmin/prelude/img/content/tr710_1_gr.jpg) no-repeat;}
#container_bottom img {border:0;}
#container_bottom .thumbs {position:absolute; left:0; bottom:0; height:84px;}
#container_bottom a.gallery:hover em {display:block; position:absolute; width:285px; height:390px; top:-396px; left:0;}

Vielleicht kannst du hiermit etwas anfangen.

mfg Maik

 

[lili222]

Vielen lieben Dank Maik für Deine Mühe!
Auch die IEs stellen das nun bei mir wie gewollt dar!

DANKE!!