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>
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.
