amigos mios, tengo el siguiente problemilla. Si miran en este sitio web [url]www.danielamorero.com.ar/inicio.html[/url] seccion "Bodas", podrán ver (si usan firefox, chrome o ie8) que a cada lado de la foto, hay un rectangulo con fondo rosa y en el centro una flechita (en la primer imagen la flecha hacia la izquierda no existe xq no hay una imagen anterior; lo mismo sucede en la ultima con la flecha derecha) para avanzar o retroceder en las imagenes.
Pero si la miran con ie7 veran que el rectangulo de la derecha no se ve. A mi parecer es un problema con css.
La estructura de eso es la siguiente:
Código HTML:
<div class="slider">
<span id="prevBtn">
<a class="prevBtnA" href="javascript:void(0);" style="display: none;">Previous</a></span>
<div id="slide-gallery">
<ul style="width: 3760px;">
<li id="bodas" style="float: left;"><img src="img/site/bodas/bodas_1.jpg"></li>
<li id="bodas" style="float: left;"><img src="img/site/bodas/bodas_2.jpg"></li>
<li id="bodas" style="float: left;"><img src="img/site/bodas/bodas_3.jpg"></li>
<li id="bodas" style="float: left;"><img src="img/site/bodas/bodas_4.jpg"></li>
<li id="bodas" style="float: left;"><img src="img/site/bodas/bodas_5.jpg"></li>
<li id="bodas" style="float: left;"><img src="img/site/bodas/bodas_6.jpg"></li>
<li id="bodas" style="float: left;"><img src="img/site/bodas/bodas_7.jpg"></li>
<li id="bodas" style="float: left;"><img src="img/site/bodas/bodas_8.jpg"></li>
</ul>
</div>
<span id="nextBtn">
<a class="nextBtnA" href="javascript:void(0);" style="display: inline-block;">Next</a></span>
</div> y el css para esa parte es:
Código HTML:
/* ----> Slider */
#slide-gallery {
display:inline-block;
height:440px;
overflow:hidden;
width:470px;
}
#slide-gallery ul, #slide-gallery li{
margin:0;
padding:0;
list-style:none;
}
#slide-gallery li{
width:470px;
height:440px;
overflow:hidden;
}
span#prevBtn,
span#nextBtn {
background:url(../img/layout/web_2_11.png) top left repeat scroll;
height:440px;
width:24px;
}
span#prevBtn {
float:left;
margin-left:1px;
}
span#nextBtn {
float:right;
margin-right:1px;
}
a.prevBtnA{
background:url(../img/layout/web_2_07.png);
display:inline-block;
height:31px;
margin-top:204px;
text-indent:-900em;
width:24px;
}
a.nextBtnA{
background:url(../img/layout/web_2_09.png);
display:inline-block;
height:31px;
margin-top:204px;
text-indent:-900em;
width:24px;
}
Desde ya agradezco cualquier colaboracion para resolver el problema.
Saludos, y gracias!
Matute