Div mas ancha en FF que en IE

damiann · #1 (**permalink**) 24/12/2009, 07:49

Buenos dias, hace tiempo estoy trabajando en un diseño, cuando empeze a hacerla en ie se veia perfecto, que es siempre lo dificil, pero en cambio ahora el problema lo tube con FF.
El contenido se ve mas ancho. Aca les dejo unas imagenes.

Pero con el complemento WebDeveloper con la herramienta "Usar modelo borde de caja" se acomoda perfectamente.

Espero que alguien pueda ayudarme

Saludos
Damian.

AhmedRugama · #2 (**permalink**) 24/12/2009, 08:36

Tienes que usar dos divs, uno que contenga el fondo con la sombra
por ejm

#container{width:950px; background: url(...);}
y otro con margin
#margen{margin:0 35px;}
de alli, a cada elemento dentro de margin(menu, raya, contenido)le pones float:left; y que los width sumen la medida de #container

no se porque te esta saliendo mal, si quieres mas ayuda pone el css que estas usando

damiann · #3 (**permalink**) 24/12/2009, 08:48

Si me re olvide de ponerles el codigo.

Código:

#contenedor {
    width:100%;
	border:1px solid #F2F2F2;
	margin:0 auto;
	background:#FFF;
	text-align:center;
}
#header {
	width:100%;
	height:184px;
	background:url(imagenes/header-bg.jpg);
}
#centro {
	width:680px;
	background:url(imagenes/centro-bg.jpg) repeat-y center;
	padding:0 35px 0 35px;
	margin: 0 auto;
	text-align:left;
}
#centro #menu {
	float: left;
	width: 173px;
}
#centro #menu ul{
	width:161px;
	list-style: none;
	padding:6px;
	margin:6px;
	text-align:left;
}
#centro #menu ul li{
	font-size:0;
	line-height:0;
	background:url(imagenes/menu-flecha.gif) 5px 6px no-repeat;
	height:25px;
	border-bottom:1px dashed #CCC;
}
#centro #menu ul li a{
	background:url(imagenes/menu-flecha.gif) 5px 6px no-repeat;
	display:block;
	padding:0 0 0 25px;
	color:#000;
	background-color:inherit;
	font:normal 11px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-decoration:none;
}
#centro #menu ul li a:hover{
	color:#000;
	background-color:#f6f6f6;
}

#centro #menu .titulo {
	width:100%;
	height:25px;
	background:url(imagenes/menu-titulo.jpg);
	font-size:14px;
	padding:4px 0 0 25px;
}
#centro #contenido {
	float: right;
	width: 418px;
}
#centro #contenido .titulo {
	width:100%;
	height:25px;
	background:url(imagenes/contenido-titulo.jpg);
	font-size:14px;
	padding:4px 0 0 25px;
}
#centro #contenido .titulo a, a:visited {
	text-decoration: none;
	color: #666; 
	background: inherit;
}
#centro #contenido .texto {
	width:412px;
	font-size:11px;
	color:#838383;
	margin:0 3px 0 3px;
	padding:3px;
}
#centro #clear {
	height:100%;
	clear:both;
	background-color:#FFF;
}
#footer {
	background:url(imagenes/footer_bg.gif) repeat-x #f6f6f6;
	width:100%;
	border-top:3px solid #CCC;
	height: 70px;
	padding-top:10px;
	font-size: 92%;

AhmedRugama · #4 (**permalink**) 24/12/2009, 09:14

prueva con esto
#centro {
width:680px;
background:url(imagenes/centro-bg.jpg) repeat-y center;
margin: 0 auto;
text-align:left;
}
#centro #margen{
width:640px;
margin:auto;
}

y crea un div on id margen que contenga todo lo que esta dentro de #centro,
creo que el problema es el padding, trata de usar padding solo cuando el tamaño del div en que lo usas este en dependecia de su contenido

damiann · #5 (**permalink**) 25/12/2009, 10:08

Antes que nada Felices fiestas!
despues que no funciono del todo

AhmedRugama · #6 (**permalink**) 25/12/2009, 11:11

ok, estaba viendo el css y los problemas no son los contenedores, poneme el html y te lo resuelvo

damiann · #7 (**permalink**) 25/12/2009, 12:20

ahi va el html

Código:

<!xml version="1.0" encoding="utf-8">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<?
require("inc/funciones.php");
?>
<title>Cemacol<? get_titulo(stripslashes($_GET['Sec'])); ?></title>
<link href="cemacol.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="cemacol-ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="contenedor">
  <div id="header">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="680" height="184" class="logo" id="Logo-Cemacol">
      <param name="movie" value="imagenes/header-logo.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="SCALE" value="noborder" />
      <!--[if !IE]>-->
      <object data="imagenes/header-logo.swf" type="application/x-shockwave-flash" width="680" height="184">
        <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="SCALE" value="noborder" />
        <div>
          <h4>El contenido de esta p&aacute;gina requiere una versi&oacute;n m&aacute;s reciente de Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" /></a></p>
        </div>
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>
  </div>
  <div id="centro">
 <div id="margen">
  <div id="menu">
    	<div class="titulo">Navegacion</div>
            <ul>
                <li><a href="/cemacol">Portada</a></li>
                <li><a href="?Sec=Institucional">Institucional</a></li>
                <li><a href="?Sec=Objetivos">Objetivos</a></li>
                <li><a href="?Sec=Cemacol">Cemacol</a></li>
                <li><a href="?Sec=Inmobiliarias">Inmobiliarias</a></li>
                <li><a href="?Sec=Noticias">Noticias</a></li>
                <li><a href="?Sec=Mapas">Mapas</a></li>
                <li><a href="?Sec=Contactenos">Contactenos</a></li>
            </ul>
    </div>
    <div id="contenido">
   	  <div class="titulo"><b><a href="/cemacol">Cemacol</a></b> <? get_sec(stripslashes($_GET['Sec'])); ?></div>
              <div class="texto"><? if (!$_GET['Sec']) {include("paginas/portada.php");}
							else
							{include ("inc/exec.php");};?>
</div>
    </div>
</div>
        <div id="clear"></div>
  </div>
    <div id="footer">
<a href="#">Portada</a>  |  <a href="#">Portada</a>  |  <a href="#">Portada</a>  |  <a href="#">Portada</a>  |  <a href="#">Portada</a>  |  <a href="#">Portada</a>  |  <a href="#">Portada</a>  |  <a href="#">Portada</a>  |  <a href="#">Portada</a><br />
Copyright &copy; 2010 <a href="#">Cemacol</a>, Todos los derechos reservados.</div>
</div>
</body>
</html>

AhmedRugama · #8 (**permalink**) 26/12/2009, 09:11

Ese era el problema, ponele esto

#margen{
margin:0 35px;
}

Aunque te va a seguir dando algunos problemas por otros errores que tenes en el CSS
pero te sugiero que proves armandola al suave y probando cada atributo, solo asi vas a aprender al final
recorda que la practica hace al maestro

Saludos