margin : 0 auto; en IE

ironmansp · #1 (**permalink**) 09/10/2008, 03:02

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**) 09/10/2008, 06:04

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.

ironmansp · #3 (**permalink**) 09/10/2008, 07:03

#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**) 09/10/2008, 07:14

"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#contenedor {
    position : relative;
    margin : 0 auto;
    border : 1px solid black;
}

Saludos.

ironmansp · #5 (**permalink**) 09/10/2008, 07:25

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**) 09/10/2008, 07:30

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.

webosiris · #7 (**permalink**) 09/10/2008, 08:21

que doctype estes usando?

ironmansp · #8 (**permalink**) 09/10/2008, 08:44

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

Mikmoro · #9 (**permalink**) 09/10/2008, 10:04

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.

ironmansp · #10 (**permalink**) 10/10/2008, 02:04

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?

Mikmoro · #11 (**permalink**) 10/10/2008, 02:24

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.

ironmansp · #12 (**permalink**) 10/10/2008, 02:43

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

Mikmoro · #13 (**permalink**) 10/10/2008, 04:08

Cita:

Iniciado por ironmansp

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.

webosiris · #14 (**permalink**) 10/10/2008, 05:48

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

ironmansp · #15 (**permalink**) 10/10/2008, 09:01

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**) 10/10/2008, 09:16

Pues lo acabo de ver con Firefox 3 y no se ve centrado

webosiris · #17 (**permalink**) 10/10/2008, 09:16

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

kseso? · #18 (**permalink**) 10/10/2008, 09:23

¿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:

ironmansp · #19 (**permalink**) 10/10/2008, 09:45

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

mariadelro · #20 (**permalink**) 10/10/2008, 14:41

prueba con
margin-left: 0px auto;
margin-right: 0px auto;

webosiris · #21 (**permalink**) 10/10/2008, 14:50

odio las autocitas, pero....

Cita:

Iniciado por webosiris

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]

ironmansp · #22 (**permalink**) 13/10/2008, 07:35

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

que es eso de "modo quirks?"

webosiris · #23 (**permalink**) 13/10/2008, 07:54

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

kseso? · #24 (**permalink**) 13/10/2008, 08:38

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:

ironmansp · #25 (**permalink**) 13/10/2008, 09:04

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