Foros del Web » Creando para Internet » CSS »

margin : 0 auto; en IE

Estas en el tema de margin : 0 auto; en IE en el foro de CSS en Foros del Web. se los pasa por el forro? es que no me centra nada de nada en los divs... sin embargo en firefox sale perfecto... Este IE ...
  #1 (permalink)  
Antiguo 09/10/2008, 04:02
 
Fecha de Ingreso: febrero-2007
Mensajes: 134
Antigüedad: 10 años, 9 meses
Puntos: 2
margin : 0 auto; en IE

se los pasa por el forro? es que no me centra nada de nada en los divs... sin embargo en firefox sale perfecto...

Este IE me trae por la calle de la amargura...
  #2 (permalink)  
Antiguo 09/10/2008, 07:04
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: margin : 0 auto; en IE

Mostrá el código CSS involucrado, puede que el error esté en otro lado.
¿le definiste un ancho al elemento que querés centrar?


Saludos.
  #3 (permalink)  
Antiguo 09/10/2008, 08:03
 
Fecha de Ingreso: febrero-2007
Mensajes: 134
Antigüedad: 10 años, 9 meses
Puntos: 2
con este css

#contenedor {
position: relative;
margin-top: 0pt;
margin-right: auto;
margin-bottom: 0pt;
margin-left: auto;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
  #4 (permalink)  
Antiguo 09/10/2008, 08:14
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: margin : 0 auto; en IE

"por lo general" el centrado no funcionará si no le definís un ancho al bloque.

A propósito, podés especificar lo mismo con solo 3 líneas:

Código css:
Ver original
  1. #contenedor {
  2.     position : relative;
  3.     margin : 0 auto;
  4.     border : 1px solid black;
  5. }


Saludos.
  #5 (permalink)  
Antiguo 09/10/2008, 08:25
 
Fecha de Ingreso: febrero-2007
Mensajes: 134
Antigüedad: 10 años, 9 meses
Puntos: 2
es que el firebug saca todos los datos del cs separados

por eso sale el top el left el right y el bottom...yo solo escribo las 3 lineas...


lo curioso es que en IE no va pero en firefox si... lo cual me obliga a meter otro hack para IE
  #6 (permalink)  
Antiguo 09/10/2008, 08:30
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: margin : 0 auto; en IE

No es un "hack", la verdad es que especificar el ancho del elemento desde el principio fue un requisito para poder centrarlo. Me parece muy curioso que Firefox lo centre sin haber especificado el ancho.
  #7 (permalink)  
Antiguo 09/10/2008, 09:21
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Respuesta: margin : 0 auto; en IE

que doctype estes usando?
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #8 (permalink)  
Antiguo 09/10/2008, 09:44
 
Fecha de Ingreso: febrero-2007
Mensajes: 134
Antigüedad: 10 años, 9 meses
Puntos: 2
este aunque admito sugerencias para cambiarlo...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


si fuera necesario cambiarlo admito sugerencias...jeje
gracias por las respuestas a todos
  #9 (permalink)  
Antiguo 09/10/2008, 11:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: margin : 0 auto; en IE

El doctype es correcto.
Como te dice alvlin, sin ancho no te lo puede centrar. Es más posible que esté ocupando todo el ancho dentro de los márgenes del body o de la caja que lo contenga, pero centrado, es casi seguro que no.

No obstante, pon el trozo de código donde está contenida esa caja y el código css que usas en todo ese trozo para intentar localizar el problema, porque con el doctype que has puesto, con margin: 0 auto tanto FF como IE te lo deben centrar.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 10/10/2008, 03:04
 
Fecha de Ingreso: febrero-2007
Mensajes: 134
Antigüedad: 10 años, 9 meses
Puntos: 2
este es el css que me da firebug que tengo activo...

EN Firefox 2.0.17 el css sale asi:
html,body
{
margin: 0 auto;
padding:0;
}

body
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin :0 auto;
width: 942px ;
}
#contenedor
{
border-width: 0 1px;
border-style:solid;
border-color: #000;
position: relative;
margin: 0 auto;
border: 1px solid #000;
}

y en IE me sale este:
BODY {
MARGIN: 0px auto;
WIDTH: 1178px;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 11px;
}
#contenedor {
BORDER-BOTTOM: #000 1px solid;
POSITION: relative;
BORDER-LEFT: #000 1px solid;
MARGIN: 0px auto;
BORDER-TOP: #000 1px solid;
BORDER-RIGHT: #000 1px solid;
}

contenedor esta contenido en el body...y en teoria no deberia salir centrado?

Curioso un detalle seniores, yo desarrollo con dos monitores, en el que escribo el codigo lo tengo 1280x1024 y en el que veo el resultado del codigo lo tengo a 1024x768:
el firefox calcula la resolucion de pantalla en base a donde tengo activa la ventana
el IE calcula la pantalla en base a lo que tengo de principal aunque la ventana este en la otra parte maximizada a todo tamanio...
sera un bug?
  #11 (permalink)  
Antiguo 10/10/2008, 03:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: margin : 0 auto; en IE

Es la cosa más extraña que he oido jamás: ¿cómo te "va a salir" una css en FF y otra en IE? La css es una, a menos que tengas definida una css específica para IE y la cargues mediante comentarios condicionales o algún lenguaje de programación del lado del servidor.

Y lo que comentas de los monitores es algo impensable: el ancho se verá según el monitor en el que lo veas, no según sea la fuente, claro está, excepto en el caso de que el script que te redimensiona según la resolución te esté fallando en uno de los dos navegadores.

Si tienes una hoja específica para IE es normal que te ocurra eso del ancho, aunque no tiene nada que ver con los monitores, ya que mientras en una hoja indicas que el body tiene 924px de ancho (width: 942px ;), en la otra dices que tenga 1178 (width: 1178px ;).

No tengo ni idea de qué estás desarrollando ni cómo lo haces, pero me parece que en alguna parte hay un cacao impresionante.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 10/10/2008, 03:43
 
Fecha de Ingreso: febrero-2007
Mensajes: 134
Antigüedad: 10 años, 9 meses
Puntos: 2
Respuesta: margin : 0 auto; en IE

la anchura y la altura de la pantalla la saco a traves de javascript.. y te juro que lo hace asi:

<script language="Javascript">
var ancho=screen.width;
var alto=screen.height;
</script>
<?
if (empty($_SESSION['PantallaAlto']))
{
if (empty($_POST['PantallaAlto']))
{
echo '<form name="formulario" method="POST"><br>';
echo '<input type="hidden" name="PantallaAncho"><br>';
echo '<input type="hidden" name="PantallaAlto"><br>';
echo '<input type="hidden" name="URI" value="'.$_SERVER['REQUEST_URI'].'"><br>';
echo '</form><br>';
echo '<script language="javascript" type="text/javascript"> document.formulario.PantallaAncho.value=ancho; document.formulario.PantallaAlto.value=alto;';
echo 'document.formulario.submit();';
echo '</script>';
}
else
{
$_SESSION['PantallaAlto'] = $_POST['PantallaAlto'];
$_SESSION['PantallaAncho'] = $_POST['PantallaAncho'];
}
}

solo cargo un css y pone esto:
width: <? echo round($_SESSION['PantallaAncho']*92/100) ?>px ;

en un caso me devuelve 1178px que es el 92% de 1280 y en el otro 942px que es el 92% de 1024... tu me diras...
raro como ello solo...
el IE lo tengo maximizado en el portatil a 1280x1024 y el firefox lo tengo maximizado en un monitor de 19 TFT a 1024x768


hombre, hecho el inciso lo que me preocupa es que no lo centra aunque le pongo las anchuras...
  #13 (permalink)  
Antiguo 10/10/2008, 05:08
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: margin : 0 auto; en IE

Cita:
Iniciado por ironmansp Ver Mensaje
el IE lo tengo maximizado en el portatil a 1280x1024 y el firefox lo tengo maximizado en un monitor de 19 TFT a 1024x768
Hombre, juraría que esto no es lo que has dicho antes:

Cita:
el firefox calcula la resolucion de pantalla en base a donde tengo activa la ventana
el IE calcula la pantalla en base a lo que tengo de principal aunque la ventana este en la otra parte maximizada a todo tamanio...
Ahora dices que los ves en distintas pantallas. Pues normal que te coja distinto ancho, digo yo.

Y terminado el inciso, te repito lo mismo de antes: si el contenedor no tiene un ancho definido, no creo que lo vaya a centrar, porque al no estar definido ni estar flotado, secillamente debe coger el 100%:

#contenedor
{
border-width: 0 1px;
border-style:solid;
border-color: #000;
position: relative;
margin: 0 auto;
border: 1px solid #000;
}

#contenedor {
BORDER-BOTTOM: #000 1px solid;
POSITION: relative;
BORDER-LEFT: #000 1px solid;
MARGIN: 0px auto;
BORDER-TOP: #000 1px solid;
BORDER-RIGHT: #000 1px solid;
}

Pero bueno, me puedo equivocar.
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 10/10/2008, 06:48
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Respuesta: margin : 0 auto; en IE

la verdad no entiendo porque usar tanto script y tantas manos para calcular el ancho para terminar usando porcentajes.... width:92% y ya está!

para terminar con las incognitas mejor pon un link la versión online, porque ahora vaya a ser que tenes el doctype en la 3 linea y el ie te esta cargando en quirks
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #15 (permalink)  
Antiguo 10/10/2008, 10:01
 
Fecha de Ingreso: febrero-2007
Mensajes: 134
Antigüedad: 10 años, 9 meses
Puntos: 2
alla va el enlace...

http://epiezas.com/v1/site/index.php...a+web&tienda=1

si lo cargais en firefox la pagina se centra.
si lo cargais en IE la pagina se pega a la izquierda

la imagen de la cabecera derecha que pone llamanos ahora tiene un float right pero no lo hace el IE parece...
  #16 (permalink)  
Antiguo 10/10/2008, 10:16
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: margin : 0 auto; en IE

Pues lo acabo de ver con Firefox 3 y no se ve centrado
  #17 (permalink)  
Antiguo 10/10/2008, 10:16
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Respuesta: margin : 0 auto; en IE

lo dicho... el doctype no está en la 1° línea... el doctype SIEMPRE tiene que ser lo primero. arregla ese error y vemos si se soluciona o es otra cosa. margin:auto no funciona cuando ie entra en modo quirks
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #18 (permalink)  
Antiguo 10/10/2008, 10:23
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: margin : 0 auto; en IE

¿lo has visto con ff 3.0.3 :-p?
En Opera 9.25
En IE 7 a la izquierda
(observación: es iva aÑadido)

Has visto esto:
Cita:
en comunes.php (línea 47)

body {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
margin:0 auto;
width:0;
vista en ff3:

__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 10/10/2008 a las 10:31
  #19 (permalink)  
Antiguo 10/10/2008, 10:45
 
Fecha de Ingreso: febrero-2007
Mensajes: 134
Antigüedad: 10 años, 9 meses
Puntos: 2
a mi el width me pone 942px o 1178px...

pues eso, no me pone 0 , me pone 942px o 1178px... dependiendo de en que monitor lo miro...

el firefox que uso es el firefox 2.0 17
  #20 (permalink)  
Antiguo 10/10/2008, 15:41
 
Fecha de Ingreso: mayo-2008
Mensajes: 33
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: margin : 0 auto; en IE

prueba con
margin-left: 0px auto;
margin-right: 0px auto;
  #21 (permalink)  
Antiguo 10/10/2008, 15:50
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Respuesta: margin : 0 auto; en IE

odio las autocitas, pero....
Cita:
Iniciado por webosiris Ver Mensaje
margin:auto no funciona cuando ie entra en modo quirks
Cita:
Iniciado por webosiris
vaya a ser que tenes el doctype en la 3° linea y el ie te esta cargando en quirks
Cita:
Iniciado por webosiris
lo dicho... el doctype no está en la 1° línea [ergo IE te está cargando en modo quirks]
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #22 (permalink)  
Antiguo 13/10/2008, 08:35
 
Fecha de Ingreso: febrero-2007
Mensajes: 134
Antigüedad: 10 años, 9 meses
Puntos: 2
por dios!!! que es el modo quirks

he cambiado las lineas de doctype a la primera, y se me ha descojonado toda la pantalla enterita....

que es eso de "modo quirks?"
  #23 (permalink)  
Antiguo 13/10/2008, 08:54
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Respuesta: margin : 0 auto; en IE

Cita:
he cambiado las lineas de doctype a la primera, y se me ha descojonado toda la pantalla enterita
cuando te dije por privado que era más rápido y fácil maquetarla toda de nuevo, no fue porque se me cruzara por la mente sin ninguna razón aparente....
Cita:
que es eso de "modo quirks?"
modo quirks
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #24 (permalink)  
Antiguo 13/10/2008, 09:38
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: margin : 0 auto; en IE

Pues sigo viendo que no ha cambiado nada, en FF 3.0.3 se sigue viendo como la captura de pantalla que te puse, el body sigue teniendo (según web developor) width:0; y el código generado comienza así:
Cita:
<script language="Javascript">
var ancho=screen.width;
<!-- Cuerpo del script -->
}
document.oncontextmenu = new Function("return false");
</script>

<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/v1/favicon.ico" rel="shortcut icon"/>

<meta name="description" content=" ">
<title></title>
<link href="/v1/css/skin1/comunes.php" rel="stylesheet" type="text/css" /><link href="/v1/css/skin1/main.php" rel="stylesheet" type="text/css"/> <link href="/v1/css/skin1/color.php" rel="stylesheet" type="text/css" />
<link href="/v1/css/skin1/cabecera.php" rel="stylesheet" type="text/css" />
<link href="/v1/css/skin1/cuerpo.php" rel="stylesheet" type="text/css" />
<link href="/v1/css/skin1/pie.php" rel="stylesheet" type="text/css" />

<!--[if IE]>
<link href="/v1/css/skin1/ie6.php" rel="stylesheet" type="text/css"/>
<![endif]-->
<script language=".....
js/x/lib/xvisibility.js'></script>

<script language="JavaScript" type='text/javascript' src='/v1/js/jquery/jquery-1.2.6.min.js'></script>

<!-- tienes dos div antes de cerrar el </head> y abrir el <body>
<div id="contenedor">
<div id="pagina">
</head>
<body >
<div id="header">
<div id="banner">
<div id="imgizqda">
<a href="/v1/site/index.p
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #25 (permalink)  
Antiguo 13/10/2008, 10:04
 
Fecha de Ingreso: febrero-2007
Mensajes: 134
Antigüedad: 10 años, 9 meses
Puntos: 2
los divs ya estan ajustado, pero lo de la cabecera me acojona...

solo cambiando esas lineas se va toda la pagina al garete y tener que vovler a meterle mano al css que no me veo capaz ahora mismo.. tengo que tener la web activa el 1 noiviembre
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 04:09.