Hello everybody and thank you for your time,
I have created a small gallery that works under IE7, Firefox, Opera & Safari
but not under IE6.
*HTML:*
**
There are two images under each a link, the small one displayed and the big
one (class="producto_grande") only displayed when an a:hover occurs on the
small image:
<body id="producto">
...(some code here)...
<div id="contenido_principal">
....(some other code here) ...
<ul class="imagenes_1">
<li class="producto_1"><a href="#" title="Collar de perla multicolor"><img
src="../images/producto_1.png" alt="Collar de perla multicolor" /><img
src="../images/circulo_producto1-trans.png" class="producto_grande"
alt="Collar de perla multicolor" /></a></li>
<li class="producto_2"><a href="#" title="Collar de madreperla"><img
src="../images/producto_2.png" alt="Collar de madreperla" /><img
src="../images/circulo_producto2-trans.png" class="producto_grande"
alt="Collar de madreperla" /></a></li>
<li class="producto_3"><a href="#" title="Colgante de ágata"><img
src="../images/producto_3.png" alt="Colgante de ágata" /><img
src="../images/circulo_producto3-trans.png" class="producto_grande"
alt="Colgante de ágata" /></a></li>
<li class="producto_4"><a href="#" title="Pulsera de onix y plata"><img
src="../images/producto_4.png" alt="Pulsera de onix y plata" /><img
src="../images/circulo_producto4-trans.png" class="producto_grande"
alt="Pulsera de onix y plata" /></a></li>
</ul>
<ul class="imagenes_2">
<li class="producto_5"><a href="#" title="Anillo de turquesa"><img
src="../images/producto_5.png" alt="Anillo de turquesa" /><img
src="../images/circulo_producto5-trans.png" class="producto_grande"
alt="Anillo de turquesa" /></a></li>
<li class="producto_6"><a href="#" title="Broche con perlas"><img
src="../images/producto_6.png" alt="Broche con perlas" /><img
src="../images/circulo_producto6-trans.png" class="producto_grande"
alt="Broche con perlas" /></a></li>
<li class="producto_7"><a href="#" title="Pulsera de perlas y plata"><img
src="../images/producto_7.png" alt="Pulsera de perlas y plata" /><img
src="../images/circulo_producto7-trans.png" class="producto_grande"
alt="Pulseras de perlas y plata" /></a></li>
<li class="producto_8"><a href="#" title="Pendientes calabrote plata y
piedra"><img src="../images/producto_8.png" alt="Pendientes calabrote plata
y piedra" /><img src="../images/circulo_producto8-trans.png"
class="producto_grande" alt="Pendientes calabrote plata y piedra"
/></a></li>
</ul>
*CSS:*
#producto #contenido_principal ul {
float: left;
margin-top: -5px;
width: 90px;
}
#producto #contenido_principal ul.imagenes_1 {
padding-left: 5px;
}
#producto #contenido_principal a {
display: block;
height: 82px;
}
#producto #contenido_principal img.producto_grande {
display:none;
}
#producto #contenido_principal a:hover img.producto_grande {
display:inline;
left: 182px;
position: absolute;
top: 144px;
z-index: 120;
}
The problem here is the a:hover that doesn't work under IE6 and the images
are not displayed when the mouse is on small images.
I would appreciate your help on this. I'm not an experienced coder and I'm
becoming a little crazy with this... Thank you in advance!
JuanDBB..............
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
