Problemas centrado FF & IE

JonYeste · #1 (**permalink**) 12/08/2009, 08:09

Hola!

Tengo una tabla y la quiero centrar en el centro de la página. Bien, de esto ya se ha hablado mucho y he encontrado mucha información, pero ahora me surgen problemas cuando lo cuelgo en Internet

He creado un div de 100% de width y dentro he centrado una tabla dandole un 500px de width y los margenes right y left en auto. Así está centrado a la perfección en el FF.
Pero, esto de los margenes también sirve para el IE ? o hay que introducir text-align = center en el div anterior?

Este es el código por si os sirve de guía

Código HTML:

<html xmlns="w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="home2.css" type="text/css"/>
<title>Default</title>
</head>

<body style="margin-top: 0;">

<div style="width: 100%;">
<table cellpadding="0" cellspacing="0" style="border: 2px solid #000000; width: 500px; height: 500px; margin-right: auto; margin-left: auto;">
<tr>
<td style="border: 2px solid #FF00FF;">

<img alt="" src="shadowimg.png" style="width: 80%; height: 80%;"/>

</td>
</tr>
</table>
</div>

</body>
</html>

Gracias

alexk · #2 (**permalink**) 12/08/2009, 08:16

pss viendo como lo aplicas no creo que te desagrade agregarle esto a tu <table align="center"> chao y suerte!...

JonYeste · #3 (**permalink**) 12/08/2009, 08:20

Sip, así es como lo tenía desde siempre.

Pero lo desaprobaron y prefiero tener cosas digamoslo "legales", optimas a no tener cosas desaprobadas.

Gracias

Alguna otra idea?

gVenom · #4 (**permalink**) 12/08/2009, 08:38

Bueno, si el div que usas con un 100% lo usas solo para contener la tabla, entonces no veo necesario que este en un 100% de ancho, mejor dale el ancho de la tabla y centras el div en la pantalla, asi se verá centrado en todos los browser

Código css:

Ver original<div style="position: relative; width: 500px; margin: 0; padding: 0 ">

alexk · #5 (**permalink**) 12/08/2009, 08:41

style="width: 100%; meter esto en el html... seria un crimen entonces jeje... y usar tablas... carcel... el div que tienes al 100% no le veo sentido... (en este caso no veo nada mas especial) ya que eso lo hace el "body" por default , te recomiendo que uses tu "div" al 100% para darle el ancho y centrado... o si quieres tener tu web "correcta" como crees que tienes por que el validador te pide el "<!DOCTYPE"

Código html:

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

pero bueno... agregale eso y ya se debe centrar tu tabla chao y suerte

JonYeste · #6 (**permalink**) 12/08/2009, 09:28

De acuerdo,

Cita:

Bueno, si el div que usas con un 100% lo usas solo para contener la tabla, entonces no veo necesario que este en un 100% de ancho, mejor dale el ancho de la tabla y centras el div en la pantalla, asi se verá centrado en todos los browser

Lo he probado, pero no me sale centrado.

Cita:

o si quieres tener tu web "correcta" como crees que tienes por que el validador te pide el "<!DOCTYPE"

No lo puse en el ejemplo para no ocupar, pero si, lo tenía. Sorry.

De todos modos, mi pregunta era si se podía centrar la tabla sólo con los margenes left & right?
En los DOS navegadores (FF & IE)?
Porque segun lo que menciona este chico se necesita text-align en el div.

Pag.web:
granneman.com/webdev/coding/css/centertables/

Gracias de nuevo

gVenom · #7 (**permalink**) 12/08/2009, 09:32

Cita:

Lo he probado, pero no me sale centrado.

Código css:

Ver original<style type="text/css">
 
#container {
    position: relative;
    margin: 0 auto;
    width: 500px;
}
 
</style>

<div id ="container">
tu tabla aqui
</div>

prueba asi

alexk · #8 (**permalink**) 12/08/2009, 09:46

align="center" las cosas para lo que son...
o ponle relativo a tu div.. y luego a tu tabla le das absolute...

.mitabla{left:50%; margin-left:-250px;position:absolute;width:500px;}

al margin-left le restas la mitad del widh... en tu caso 250px

sino mas incorrecto aun
<center></center>

sino a la antigua

Código css:

Ver originalbody{text-align:center;}

JonYeste · #9 (**permalink**) 12/08/2009, 09:48

Si gVenom, ahora si

Pero...., no era esa la manera que yo pensaba o a la que me refería... :P

Thx

Gracias a gVenom y a alexk.

alexk · #10 (**permalink**) 12/08/2009, 09:51

JonYeste no hay mas, deja de usar tablas sino se necesitan y listo

jomaruro · #11 (**permalink**) 12/08/2009, 15:36

Hola:

Cita:

Iniciado por alexk

sino a la antigua

Código css:

Ver originalbody{text-align:center;}

text-align solo sirve para alinear texto.

La mejor solución es la que te propone gVenom

Cita:

Iniciado por gVenom

Código css:

Ver original<style type="text/css">
 
#container {
    position: relative;
    margin: 0 auto;
    width: 500px;
}
 
</style>

<div id ="container">
tu tabla aqui
</div>

Saludos.

alexk · #12 (**permalink**) 13/08/2009, 08:25

"text-align solo sirve para alinear texto."

Lo se... pero en este caso aplica para IE... ya se le dijo la solución pero ninguna quiere. pero bueno.