Foros del Web » Creando para Internet » CSS »

Div mas ancha en FF que en IE

Estas en el tema de Div mas ancha en FF que en IE en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/12/2009, 07:49
 
Fecha de Ingreso: febrero-2009
Ubicación: Luján, Argentina
Mensajes: 32
Antigüedad: 8 años, 10 meses
Puntos: 0
Pregunta Div mas ancha en FF que en IE

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.
  #2 (permalink)  
Antiguo 24/12/2009, 08:36
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
Respuesta: Div mas ancha en FF que en IE

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

Última edición por AhmedRugama; 24/12/2009 a las 08:45
  #3 (permalink)  
Antiguo 24/12/2009, 08:48
 
Fecha de Ingreso: febrero-2009
Ubicación: Luján, Argentina
Mensajes: 32
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Div mas ancha en FF que en IE

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%;
  #4 (permalink)  
Antiguo 24/12/2009, 09:14
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
Respuesta: Div mas ancha en FF que en IE

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
  #5 (permalink)  
Antiguo 25/12/2009, 10:08
 
Fecha de Ingreso: febrero-2009
Ubicación: Luján, Argentina
Mensajes: 32
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Div mas ancha en FF que en IE

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

  #6 (permalink)  
Antiguo 25/12/2009, 11:11
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
Respuesta: Div mas ancha en FF que en IE

ok, estaba viendo el css y los problemas no son los contenedores, poneme el html y te lo resuelvo
  #7 (permalink)  
Antiguo 25/12/2009, 12:20
 
Fecha de Ingreso: febrero-2009
Ubicación: Luján, Argentina
Mensajes: 32
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Div mas ancha en FF que en IE

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>
  #8 (permalink)  
Antiguo 26/12/2009, 09:11
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
Respuesta: Div mas ancha en FF que en IE

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