Hola a todos,
Estoy diseñando una web intentando que sea compatible con Firefox, IE 7 e IE 6. El problema es que en algunos ordenadores que usan IE7, una de las capas se me desajusta nada más cargar la página y luego a veces se coloca en su sitio. Dependiendo de que ordenadores sean esto directamente no pasa, pasa pero no se coloca en su sitio (hay que darle varias veces a F5 para que lo haga) o salta la ventana que pide usar controles ActiveX, al pulsar sí se ajusta, y al pulsar no también. En Firefox o IE 6 no ocurre nada de eso y se ve perfectamente.
Este es el código de la página:
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">
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<head>
<title>Prueba</title>
<link rel="stylesheet" type="text/css" href="estilos/styleFF.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="estilos/styleIE6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="estilos/styleIE7.css" />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body onload="MM_preloadImages('imagenes/m1-1.gif','imagenes/m2-2.gif','imagenes/m3-3.gif','imagenes/m4-4.gif','imagenes/m5-5.gif','imagenes/m6-6.gif','imagenes/masinfo2.gif')">
<!--bg1-->
<!--Comienzo de Contenedor-->
<div class="contenedor">
<!--Cabecera-->
<div style="float:left;height:35px;background-color:#204661;width:100%"></div>
<div style="background-color:#EBF6FE;width:100%;float:left">
<div style="float:left">
<img src="imagenes/logo3.gif" class="logo sinborde" alt="Logo 1" title="Logo 1"/>
</div>
<div style="float:left;margin-left:45px">
<img src="imagenes/logo2.gif" alt="logo 2" class="apartamentos sinborde" title="logo 2"/> </div>
<!--Fin de Cabecera-->
<!--Inicio de Botonera-->
<div style="width:767px;height:316px;margin:0">
<div class="botonera">
<ul class="listabotonera">
<li style="list-style-type:none;margin:0px;padding:0px">
<img src="imagenes/m.gif" alt="fondo de botonera 1" width="256" height="18" /></li>
<li style="list-style-type:none;margin:0px;padding:0px"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('inicio','','imagenes/m1-1.gif',1)"><img src="imagenes/m1.gif" alt="Inicio" title="Inicio" name="inicio" border="0" /></a></li>
<li style="list-style-type:none;margin:0px;padding:0px"><a href="conozcanos.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','imagenes/m2-2.gif',1)"><img alt="Conozcanos" title="Conozcanos" src="imagenes/m2.gif" name="Image9" border="0" /></a></li>
<li style="list-style-type:none;margin:0px;padding:0px"><a href="nuestros_productos.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','imagenes/m3-3.gif',1)"><img alt="Nuestros productos" title="Nuestros productos" src="imagenes/m3.gif" name="Image10" border="0" /></a></li>
<li style="list-style-type:none;margin:0px;padding:0px"><a href="losapartamentos.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','imagenes/m4-4.gif',1)"><img alt="Buscador" title="Buscador" src="imagenes/m4.gif" name="Image11" border="0" /></a></li>
<li style="list-style-type:none;margin:0px;padding:0px"><a href="contacto.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','imagenes/m5-5.gif',1)"><img alt="Contacto" title="Contacto" src="imagenes/m5.gif" name="Image12" border="0" /></a></li>
<li style="list-style-type:none;margin:0px;padding:0px"><a href="ayuda.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','imagenes/m6-6.gif',1)"><img alt="Ayuda" title="Ayuda" src="imagenes/m6.gif" name="Image13" border="0" height="42" /></a></li>
<li style="list-style-type:none;margin:0px;padding:0px"><img src="imagenes/m7.gif" alt="fondo de botonera 2" title="fondo de botonera 2" width="256" height="0" /></li>
</ul>
</div>
<div class="imagenseccion">
<img src="imagenes/imageninicio.jpg" alt="foto principal" width="510" height="316" style="border:0" title="foto principal" /></div>
</div>
<!--Fin de botonera-->
<!--Inicio de contenido-->
<!--Bloque izquierdo-->
<div class="bloqueizquierdo">
<p class="titular2"><span class="rojo">Aquí va el primer titular</p>
<img class="imagenizquierda" src="imagenes/imagen1.jpg" alt="Imagen del primer titular" title="Imagen del primer titular" width="200" height="144" />
<p class="parrafoizquierda1">Sitio reservado para el primer párrafo. Sitio reservado para el primer párrafo. </p>
<p class="parrafoizquierda">Sitio reservado para el segundo párrafo. Sitio reservado para el segundo párrafo. Sitio reservado para el segundo párrafo. Sitio reservado para el segundo párrafo. </p>
<p class="parrafoizquierda">Sitio reservado para el tercer párrafo. Sitio reservado para el tercer párrafo. Sitio reservado para el tercer párrafo. Sitio reservado para el tercer párrafo. </p>
<p class="parrafoizquierda">Sitio reservado para el cuarto párrafo. Sitio reservado para el cuarto párrafo. Sitio reservado para el cuarto párrafo. Sitio reservado par el cuarto párrafo. </p>
</div>
<!--Fin de bloque izquierdo-->
<!--Bloque central-->
<div id="lineaazulvertical"> </div>
<!--Bloque central-->
<!--Inicio de bloque derecho-->
<div class="bloquederecho">
<div class="bderecho1" style="margin-top:27px">
<span class="titular">
Aquí va el segundo titular, más largo que el primero.</span>
</div>
<div class="bderecho2">
<img src="imagenes/imagen2.jpg" alt="Imagen del segundo titular" title="Imagen del segundo titular" />
</div>
<div class="bderecho3"><p style="font-family:Arial, Helvetica, sans-serif;font-size:12px;text-align:justify;margin:0;padding:0;line-height:16px;color:#000"> </p>
</div>
<div id="lineaazulhorizontal"> </div>
<div class="bderecho1b">
<span class="titular">Aquí va el tercer titular, más largo que el primero.</span>
</div>
<div class="bloqueabajo">
<img src="imagenes/imagen3.jpg" alt="Imagen del tercer titular" title="Imagen del tercer titular" width="210" height="140" />
<img class="imagen" src="imagenes/imagen4.jpg" alt="Imagen del cuarto titular" title="Imagen del cuarto titular" />
</div>
<div class="textoabajo">
<p class="texto"> </p>
</div>
</div>
<!--Fin de bloque derecho-->
<!--Fin de contenido-->
<!--Comienzo de pie-->
<div style="float:left;background-color:#EBF6FE;width:767px;margin-left:0px;margin-right:0px;background-image:url(imagenes/fondoazul.gif);background-repeat:repeat-x;height:1px"></div>
<div class="pie">
<span style="padding-left:4px;color:#6B7A86;font-family:arial;font-size:17px;font-weight:bold;text-align:left;line-height:1.4em">
NOMBRE DE LA EMPRESA</span>
<span style="padding-left:0px;color:#6B7A86;font-family:arial;font-size:13px;font-weight:bold;text-align:left;margin:0px;line-height:1.4em"> - NIF de la empresa</span><br/>
<span style="padding-left:5px;color:#6B7A86;font-family:arial;font-size:12px;font-weight:bold;text-align:center;margin:0;line-height:15px">Dirección de la empresa
C.P. Ciudad<br/>
Tfno/fax: XXX XXX XXX
Móvil XXX XXX XXX</span>
<p class="contacto"><br/>
<a href="privacidad.html">Aviso legal y Política de privacidad</a> - <a href="contacto.html">Contactar con nosotros</a></p>
</div>
<!--Fin de pie-->
</div>
<!--Fin de Contenedor-->
<!--bg1--></div>
<?php include("includes/footer.inc.php"); ?>
</body>
</html> Supongo que es un problema de que el ordenador tenga activados los ActiveX o no pero ¿Hay alguna de forma de modificar la página para que no se desajuste sin que el usuario tenga activado los controles Activex? Os agradecería mucho cualquier tipo de ayuda o sugerencia.
La capa que se desajusta hacia la derecha es esta:
<div style="width:767px;height:316px;margin:0">
que contiene <div class="botonera"> y <div class="imagenseccion">.
Editado: He probado añadiendole un "position: relative" a la capa y aunque ocurre menos ves sigue desajustandola de vez en cuando, es decir la he dejado así:
<div style="width:767px;height:316px;margin:0;position: relative">
En el siguiente mensaje pongo la hoja de estilos ya que en este no me entra.