Foros del Web » Creando para Internet » CSS »

Desajuste temporal de una capa en IE7

Estas en el tema de Desajuste temporal de una capa en IE7 en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/12/2008, 16:25
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Desajuste temporal de una capa en IE7

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">&nbsp;</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">&nbsp;</p>
</div>

<div id="lineaazulhorizontal">&nbsp;</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">&nbsp;</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.

Última edición por haga41; 03/12/2008 a las 03:57
  #2 (permalink)  
Antiguo 02/12/2008, 16:26
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Desajuste temporal de una capa en IE7

Esta es la hoja de estilos para IE7
Código HTML:
.contenedor{
	width:767px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0;
	background-color:#ebf6fe;
	text-align:center;
	background-position: center;
}
.logo{
	 margin-left:15px;
	 margin-right:23px;
	 margin-top:10px;
	 margin-bottom:2px;
}
.sinborde{
	border: 0;
}
.apartamentos{
	margin-left:0;	
	width:427px;
	height:93px;
	margin-bottom:6px;
	margin-top:15px;
}
.botonera{
	float:left;
	width:256px;
	height:316px;
	margin:0px;
	padding:0px;
	background-color:#c2d8dd;
}
.listabotonera{
	list-style-type:none;
	margin:0px;
	padding:0px;
	background-color:#c2d8dd;
	height:316px;
}
.imagenseccion{
	float:left;
	width:511px;
	height:316px;
	margin:0;
	padding:0;
	background-color:#ebf6fe;
	overflow:hidden;
}
.bloqueizquierdo{
	float:left;
	width:252px;
	height:493px;
	margin:0;
	padding:0;
	background-color:#ebf6fe;
	padding-top:10px;
	overflow:hidden;
}
.titular2{
	font-family:Arial;
	font-weight:bold;
	font-size:13px;
	text-align:left;
	letter-spacing:0;
	margin-top:26px;
	margin-bottom:12px;
}
.imagenizquierda{
	margin-left:7px;
	margin-bottom:0px;
}
.parrafoizquierda1{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:justify;
	color:#000;
	line-height:14px;
	padding-top:0px;
	padding-left:29px;
	padding-right:21px;
	margin-top:9px;
	margin-bottom:12px;
}
.parrafoizquierda{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:justify;
	color:#000;
	line-height:14px;
	padding-top:0px;
	padding-left:29px;
	padding-right:21px;
	margin-top:0px;
	margin-bottom:12px;
}
#lineaazulvertical{
	background-image:url(../imagenes/lineaazul.gif);
	background-repeat:no-repeat;
	float:left;
	height:493px;
	margin-left:4px;
	width:4px;
	margin-top:0;
	margin-bottom:0;
}
.bloquederecho{
	float:left;
	width:495px;
	height:493px;
	margin:0;
	padding:0;
	background-color:#ebf6fe;
	overflow:hidden;
}
.bderecho1{
	float:left;
	margin-left:11px;	
	padding-left:18px;
	margin-left:0;
	margin-right:2px;
	margin-top:11px;
	margin-bottom:11px;
}
.titular{
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:13px;
	text-align:center;
	padding:0;
	color:#6b7a86;
	letter-spacing:0;
	line-height:14px;
	margin-left:2px;	
}
.bderecho2{
	float:left;
	margin-left:24px;
	margin-right:5px;
	margin-top:2px;
}
.bderecho3{
	padding-left:0px;
	padding-right:0px;
	padding-top:0;
	margin-top:1px;
	margin-left:0px;
	margin-right:0px;
	width:254px;
	float:none;
}
#lineaazulhorizontal{
	background-image:url(../imagenes/lineahorizontal2.gif);
	background-repeat:no-repeat;
	float:none;
	width:auto;
	margin-left:22px;
	margin-top:22px;
	margin-bottom:0px;
	height:16px;
}
.bderecho1b{
	float:left;
	margin-left:14px;	
	padding-left:20px;
	margin-left:0;
	margin-right:2px;
	margin-top:0;
	margin-bottom:10px;
	text-align:left;
}
.bloqueabajo{
	float:left;
	margin-left:22px;
	padding:0;
	background-color:#ebf6fe;
}
.imagen{
	margin-left:41px;
}
.textoabajo{
	float:left;
	margin-left:16px;	
	padding-left:22px;
	margin-left:0;
	margin-right:1px;
	margin-top:10px;
	margin-bottom:0px;
	overflow:hidden;
}
.texto{
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-align:justify;
	color:#000;
	font-size:12px;
	line-height:16px;
	margin-top:3px;
	padding:0;
}
.pie{
	background-color:#EBF6FE;
	margin-left:0px;
	margin-right:0px;
	margin-top:13px;
	padding-bottom:26px;
}
.contacto{
	padding-left:12px;
	color:#6B7A86;
	font-family:arial;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	letter-spacing:0.5px;
	margin:0;
	line-height:15px
}
Editado: Ya he conseguido arreglarlo para IE 7, con quitarle a la capa contenedora de esos divs la anchura y la altura ya funciona bien. Para estilo de Firefox mantengo la anchura y la altura para que no se desajuste.

Vamos que en el código antes del body, ahora .php iría un detector de navegador que elegiría el estilo necesario:

<?php
$navegador = getenv("HTTP_USER_AGENT");
if (preg_match("/MSIE/i", "$navegador"))
{
$estilo = "capaie";
}
else{
$estilo = "capaFF";
}
?>

<div class="<?php echo $estilo;?>" >
<div class="botonera">

En la hoja del css de IE7 iría este estilo

.capaie{
margin:0;
}

En la hoja de estilos de Firefox iría este estilo

.capaFF{
width:767px;
height:316px;
margin:0;
}

Última edición por haga41; 03/12/2008 a las 16:47
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 18:27.