Error en IE6 con Easy Slider Jquery

alvarols · #1 (**permalink**) 18/12/2009, 16:45

Tengo un problema al adaptar el Easy Slider Jquery al sitio web que estoy haciendo, y es que el internet explorer no delimita el area donde debe aparecer la secuencia de imágenes. Aquí coloco como aparece la imagen en el explorer 6

alvarols · #2 (**permalink**) 18/12/2009, 16:46

Coloco a continuación el HTML y el CSS

HTML

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="screen.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/easySlider1.7.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				auto: true, 
				continuous: true
			});
		});	
	</script>
<!--[if lte IE 6]>
	<script type="text/javascript" src="js/supersleight-min.js"></script>
<![endif]-->
<title>Untitled Document</title>
</head>

<body>
<!--CABEZAL -->
<div id="cabezal">
	<div id="contenedor">
    	<div class="menu">
    		<ul>
    			<li class="principal"><a href="index.php"></a></li>
        		<li class="nosotros"><a href="nosotros.php"></a></li>
        		<li class="productos"><a href="productos.php"></a></li>
        		<li class="servicios"><a href="servicios.php"></a></li>
        		<li class="contacto"><a href="contacto.php"></a></li>
    		</ul>
         </div>
         <div class="icono"> </div>
         <a href="index.php"><img src="Imagenes/petro.png" style="margin:30px 0px 0px 0px; border:none;" /></a> </div>
</div>
<!--CONTENIDO -->
<div id="petrobase">
	<div id="petroproyect">
        <div id="jquery">
    		<div id="content">
    			<div id="slider">
					<ul>				
						<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
						<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
						<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
						<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
						<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>			
					</ul>
				</div>
    		</div>
        </div>    
    </div>
</div>
</body>
</html>

style.css
@charset "utf-8";
/* CSS Document */

body{
margin:0px;
}

#cabezal{
background:url(Imagenes/cabezal.jpg) repeat-x;
height:150px;
}

#contenedor{
display:block;
position:relative;
width:960px;
margin: 0 auto;
padding:0px 30px 0px 30px:
}

.menu{
position:relative;
float:left;
width:800px;
height:55px;
padding:0px 0px 0px 0px;
}

.menu ul{
float:left;
margin:0px;
padding:0px;
}

.menu ul li{
display:inline;
float:left;
margin: 0px;
padding: 0px;
}

.menu ul li.principal a{
width:153px;
height:57px;
background:url(Imagenes/principal.png);
float:left;
margin: 0px 0px 0px 0px;
}

.menu ul li.nosotros a{
width:153px;
height:57px;
background:url(Imagenes/nosotros.png);
float:left;
margin: 0px 0px 0px 0px;
}

.menu ul li.productos a{
width:153px;
height:57px;
background:url(Imagenes/productos.png);
float:left;
margin: 0px 0px 0px 0px;
}

.menu ul li.servicios a{
width:153px;
height:57px;
background:url(Imagenes/servicios.png);
float:left;
margin: 0px 0px 0px 0px;
}

.menu ul li.contacto a{
width:153px;
height:57px;
background:url(Imagenes/contacto.png);
float:left;
margin: 0px 0px 0px 0px;
}

.icono{
height:120px;
width:121px;
float:right;
background:url(Imagenes/icono.png);
margin:0px 0px 0px 0px;
}

.logotipo{
padding: 10px 0px 0px 0px;
}

/*Cuerpo*/

#petrobase{
display:block;
position:relative;
height:477px;
background:url(Imagenes/petrobase.jpg);
margin-top:0px;
}

#petroproyect{
display:block;
width:1020px;
height:477px;
background:url(Imagenes/petroproyect.jpg);
margin:0 auto;
}

#jquery{
padding:100px 0px 0px 232px;
width:550px;
height:250px;
}

screen.css

img{border:none;}

/* image replacement */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */

#container{
margin:0 auto;
position:relative;
text-align:left;
width:550px;
background:#fff;
margin-bottom:2em;
}
#header{
height:80px;
line-height:80px;
background:#5DC9E1;
color:#fff;
}
#content{
position:relative;
}

/* Easy Slider */

#slider{
margin: 0px;
width:550px;
height:250px;
}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:550px;
height:250px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:550px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(images/btn_next.gif) no-repeat 0 0;
}

alexk · #3 (**permalink**) 18/12/2009, 22:12

la verda... almenos para mi me es dificil interpretar el comportamiento... con ese codigo... vamos que seria mejor que lo subas a un host de prueba o algo asi... para ver que pasa...

pero bueno nose si funcione, solo se me ocurre

Código:

#slider{
margin: 0px;
width:550px;
height:250px;
overflow:hidden;
}

alvarols · #4 (**permalink**) 19/12/2009, 12:36

Ya lo intenté y no me funcionó

martaturrado · #5 (**permalink**) 17/09/2010, 11:33

Hola alvarols, yo tengo exactamente el mismo problema con easyslider en ie6 e ie7, encontraste solución?

También he intentado overflow:hidden; sin éxito, no sé que hacer, tengo ya la web publicada porque es urgente www.soynatura.es

Gracias de antemano!

Marta