Foros del Web » Creando para Internet » CSS »

Objetos se salen de lugar en IE8

Estas en el tema de Objetos se salen de lugar en IE8 en el foro de CSS en Foros del Web. Hola señores Estoy haciendo mi propio slideshow tipo "tren" con JS, sin hacer uso de jQuery u otros. El caso es que el JS funciona ...
  #1 (permalink)  
Antiguo 08/07/2010, 16:56
Avatar de junihh  
Fecha de Ingreso: febrero-2004
Ubicación: República Dominicana
Mensajes: 997
Antigüedad: 13 años, 10 meses
Puntos: 7
Objetos se salen de lugar en IE8

Hola señores

Estoy haciendo mi propio slideshow tipo "tren" con JS, sin hacer uso de jQuery u otros. El caso es que el JS funciona muy bien en todos los navegadores (incluyendo IE6), pero el titulo y los botones salen fuera de su lugar en Firefox, Opera e IE8, aunque en Safari, Chrome, IE6-7 se ven perfecto.

El efecto es con JS, pero se que la razon del malfuncionamiento es por los CSS. Me gustaria que hecharan un ojo al codigo a ver si me sugieren alguna solucion, porque la verdad ya no se que mas hacer.

Pueden ver la muestra y codigo en esta url. Gracias de antemano a cualquier ayuda o idea que me puedan ofrecer.
__________________
JuniHH
- Mi blog
- Mi portafolio
  #2 (permalink)  
Antiguo 08/07/2010, 18:36
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: Objetos se salen de lugar en IE8

Hola junihh

Aquí tienes un arreglo:

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=ISO-8859-1;charset=windows-1252" />
<title>Probando scroll objetos</title>

<style type="text/css">
<!--

html, body, div, dl, dt, dd, ul, ol, li, 
h1, h2, h3, h4, h5, h6, pre, input, 
p, blockquote, th, td, img {
	margin: 0;
	padding: 0;
	border: 0;
}
ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.main {
	margin: 30px auto;
	width: 300px;
}
.clear { clear: both; }

div#sldCnt {
	width: 300px;
}
ul#sldObj {
	display: block;
}
ul#sldObj li.sldItm {
	width: 300px;
	height: 200px;
	float: left;
}
div.sldNxtPrv {
	position: relative;
	margin-top: -25px;
	padding: 0 8px 0 8px;
	height: 26px;
	background: url(index_files/hom_bckg.png);
	zoom: 1;
}
/* empiezan los cambios */
div#sldTit {
	color: #FFF;
	position: absolute;
	left: 4px;
	margin-top: 3px;
	zoom: 1;
}
div#sldPrv {
	width: 18px;
	position: absolute;
	top: 4px;
	right: 25px;
	height: 16px;
	zoom: 1;
}
div#sldNxt {
	width: 18px;
	position: absolute;
	top: 4px;
	right: 4px;
	height: 16px;
	zoom: 1;
}
/* finalizan los cambios */
div#sldPrv {
	background: url(index_files/hom_bot_.gif) no-repeat scroll 0 0;
}
div#sldPrv:hover {
	background: url(index_files/hom_bot_.gif) no-repeat scroll 0 -16px;
	cursor: pointer;
}
div#sldNxt {
	background: url(index_files/hom_bot_.gif) no-repeat scroll -18px 0;
}
div#sldNxt:hover {
	background: url(index_files/hom_bot_.gif) no-repeat scroll -18px -16px;
	cursor: pointer;
}

-->
</style>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

</head>
<body>


<div class="main">
	
	<div id="sldCnt">
		
		<ul id="sldObj">
			<li class="sldItm"><img src="index_files/01000000.jpg" width="300" height="200" /></li>
			<li class="sldItm"><img src="index_files/02000000.jpg" width="300" height="200" /></li>
			<li class="sldItm"><img src="index_files/03000000.jpg" width="300" height="200" /></li>
		</ul>
		
		<div class="clear"></div>
		
		<div class="sldNxtPrv">
			<div id="sldTit">El titulo</div>
			<div id="sldNxt"><img src="index_files/spacer00.gif" alt="Anterior" width="18" height="16" /></div>
			<div id="sldPrv"><img src="index_files/spacer00.gif" alt="Siguiente" width="18" height="16" /></div>
		</div>
		
	<div>

</div>
<div id="ver"></div>


<script type="text/javascript" language="javascript">

function setSlider (idCn,idOb,idPr,idNx,clItm,w,h)
{
	if ( !document.getElementById(idOb) ) return;
	//
	var cnt = document.getElementById(idCn);
	var obj = document.getElementById(idOb);
	var bPr = document.getElementById(idPr);
	var bNx = document.getElementById(idNx);
	var allLi = cnt.getElementsByTagName('li'), allLiCn = allLi.length;
	var itmLi = [], itmNx = 0, itmCn = 0, itmLiPs = [], itmLiGo = 0;
	var obInt, obPos = 0;
	//
	for (var i = 0; i < allLiCn; i++)
	{
		if (String(allLi[i].className).indexOf(clItm) != -1)
		{
			itmLi[itmNx] = allLi[i];
			itmLiPs[itmNx] = itmNx * w;
			itmNx++;
		};
	};
	//
	itmCn = itmLi.length;
	cnt.style.overflow = 'hidden';
	cnt.style.position = 'absolute';
	obj.style.position = 'relative';
	obj.style.width = (w * itmCn) + 'px';
	//
	clearInterval (obInt);
	obInt = setInterval (function ()
	{
		obPos += (itmLiPs[itmLiGo] - obPos) / 4;
		obj.style.left = (0 - obPos) + 'px';
	}, 30);
	//
	bPr.onclick = function () { if (itmLiGo <= 0) { itmLiGo = (itmCn-1); } else { itmLiGo--; }; };
	bNx.onclick = function () { if (itmLiGo >= (itmCn-1)) { itmLiGo = 0; } else { itmLiGo++; }; };
};

setSlider ('sldCnt','sldObj','sldPrv','sldNxt','sldItm',300,200);

</script>
<!-- te faltan estos dos cierres de div -->
</div>
</div>
</body>
</html> 
He comentado los cambios en el código fuente (además te faltaban dos cierres de divs al final del html -aunque esto no tiene nada que ver con la solución-).

Otra cosa: la meta emulate se debe colocar justo después de <head>.
Saludos
  #3 (permalink)  
Antiguo 09/07/2010, 10:59
Avatar de junihh  
Fecha de Ingreso: febrero-2004
Ubicación: República Dominicana
Mensajes: 997
Antigüedad: 13 años, 10 meses
Puntos: 7
Respuesta: Objetos se salen de lugar en IE8

Muchas gracias @deirdre, quedo perfecto, aunque temo los problemas que tendre al aplicarlo al trabajo final donde lo usare, a causa de los left y top que temi usar :-/

Muchisimas gracias por tu ayuda
__________________
JuniHH
- Mi blog
- Mi portafolio

Etiquetas: objetos
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 15:24.