Foros del Web » Creando para Internet » CSS »

Error en IE6 con Easy Slider Jquery

Estas en el tema de Error en IE6 con Easy Slider Jquery en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/12/2009, 16:45
 
Fecha de Ingreso: diciembre-2008
Mensajes: 738
Antigüedad: 9 años
Puntos: 15
Error en IE6 con Easy Slider Jquery

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

  #2 (permalink)  
Antiguo 18/12/2009, 16:46
 
Fecha de Ingreso: diciembre-2008
Mensajes: 738
Antigüedad: 9 años
Puntos: 15
Respuesta: Error en IE6 con Easy Slider Jquery

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;
}
  #3 (permalink)  
Antiguo 18/12/2009, 22:12
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Error en IE6 con Easy Slider Jquery

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;
}
  #4 (permalink)  
Antiguo 19/12/2009, 12:36
 
Fecha de Ingreso: diciembre-2008
Mensajes: 738
Antigüedad: 9 años
Puntos: 15
Respuesta: Error en IE6 con Easy Slider Jquery

Ya lo intenté y no me funcionó
  #5 (permalink)  
Antiguo 17/09/2010, 12:33
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1
Antigüedad: 7 años, 2 meses
Puntos: 0
Respuesta: Error en IE6 con Easy Slider Jquery

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:35.