Mouseover für bildervergrößern funktioniert

… bei firefox nicht.

Hallo Zusammen,
ich habe das Porblem, dass beim mousover das Bild im Firefox4 und IE8 immer linksoben angezeigt wird und nicht auf dem Vorschaubild. Position???

Hier die CSS:
#galerie li
{
list-style-type: none;
float: left;
margin: 0 10px 10px 0;
text-align: center;
font-weight: bold;
position: relative;
}

#galerie img
{
width: 150px;
height: 150px;
display: block;
padding: 3px;
border: 1px solid #8B0000;
}

#galerie a .gross
{
display: none;
}

#galerie a:hover .gross
{
width: 400px;
height: 400px;
display: block;
position: absolute;
top: -50px;
left: -200px;
z-index: 1;
background: #fff;
}

/*–Spezialangaben für den Internet Explorer 7–*/
*+html #galerie a:hover { z-index: 1;}
*+html #galerie li{position: static;}
*+html #galerie a {position: relative;}

/*–Spezialangaben für den Internet Explorer 6–*/
*html #galerie a:hover {display: block; z-index: 1;}
*html #galerie li{position: static;}
*html #galerie a {position: relative;}

Und die html:

Muss ich die Position für die beiden Browser neu definieren??

Danke für eure Hilfe.
Dirk

Muss ich die Position für die beiden Browser neu definieren??

Ich glaube, dass einfach das div mit der id „galerie“ position:absolute; zugewiesen bekommen muss. Da du auch schon Browserweichen in deinem Code hast, solltest du diese auch nocheinmal überprüfen.

Ansonsten müsste sich das jemand nochmal genauer ansehen, da ich jetzt gerade nicht viel Zeit habe.

kann ich leider nicht beantworten…

Hi Dirk,

leider kann ich Dir bei Deinem Problem nicht weiterhelfen.

Gruß Mike

Hallo Dirk,

hast du einen Link für mich zu der Seite oder ein paar Screenshots wie das aussehen soll.
Auf den ersten Blick kommt mir der Code nämlich sehr kompliziert vor - ggf. geht es deutlich einfacher…

Beste Grüße
Jens

In der CSS-Klasse #galerie img hast Du die Breite von 150px festgelegt. Wenn Du nun das grosse Bild mittig über dem kleineren Bild haben möchtest, dann musst Du in der CSS-Klasse #galerie a:hover .gross einen Abstand Left von (400px-150px)/2=125px angeben! Denk daran, daß das größere Bild absolut zum kleineren positioniert wird. Beim IE8 und Firefox4 funktioniert es.