El % de una tabla en Mozilla y en IE

ferrins · #1 (**permalink**) 10/12/2006, 08:38

Hola!

BUeno pues ahi va otra duda sobre porcentajes, tengo un div que tiene solo esta propiedad:

margin:0px 10px 10px 200px;

Cuando pongo una tabla (que muestra una ristra de datos de la BBDD) dentro
del div mencionado en mozilla va perfecto, la tabla se adapta dentro del div perfectamente. Le puedo poner el width de la tabla a 80%, 90% o 100% que no hay problema.

Si hago lo mismo con Explorer, la tabla hace engrandecer el div de modo que se activa el scroll horizontal y todo se va al garete. (también cuando pongo el width de la tabla a 80%, 90% o 100%)

Me direis que no ponga width a la tabla, ya, pero es que queda muy feo, tener una tabla pequeña y que deje tanto espacio, no?

Entonces no se que propiedades ponerle a la tabla para que no engrandezca el div, sino que se adapte a él.

Algun consejo? Gracias!!

Mikmoro · #2 (**permalink**) 10/12/2006, 12:17

Creo que eso no debería hacerlo. Pon tu código para poder echarle un vistazo, y te digo si veo qué es lo que ocurre.

Mikel.

ferrins · #3 (**permalink**) 10/12/2006, 16:09

Pues ahi va el menú de navegación, que queda a la izquierda:
#menu{
position: absolute;
width: 170px;
left:10px;
border:1px dashed #999;
}
Entonces viene el div con el contenido (Donde meto la tabla)
#contenido{
margin:0px 10px 10px 200px;
padding:10px;
border:1px solid #ff0000;
}

Y ahora la tabla:
table{
width:100%; /* Aqui está el problema */
background-color:#FFCC99;
font-size: 90%;
cellspacing:1px;
padding:3px;
}

Y es que si no especifico el width de la tabla no hay problema pero claro es que queda una tabla minúscula, en cambio al ponerle el width al 100% con mozilla, como ya dije queda perfecto, pero en explorer la tabla hace engrandecer al div como unoc 300 pixeles.

Bueno pues nada a ver que te parece, Gracias!

Mikmoro · #4 (**permalink**) 10/12/2006, 16:13

¿puedes poner el html, para ver si es problema de estructura?
Mikel.

ferrins · #5 (**permalink**) 10/12/2006, 16:35

<html>
<head>
<title>Gestor</title>
<style type="text/css" media="all">
@import "../estils/admin.css";
</style>
</head>
<body>
<?
if ($admin_level=='1'){
include("menu_sadmin.php"); ?>//incluye el menu de navegación//
<div id="contenido"> //Aqui viene la tabla
//aqui iria la llamada a SQL y luego la tabla:
<table>
<tr><td>Data</td>
<td>Titular</td>
<td>Admin</td>
<?
while($row = mysql_fetch_array($sql)){
$diahora= $row['diahora'];
$data = f_datef($diahora);
?> <tr>
<td><? echo $data; ?></td>
<td><a href="veure_notis.php?id_noti=<? echo $row['id_noti'];?>"><? echo $row['titol']; ?></a></td>
<td>Per <? echo $row['nick']; ?></td>
</tr>
<? } ?>
</table>
</div>
<?
}
</body>
</html>

Como ves la table no tiene ninguna classe ni nada pues en el estilo la llamo a pelo y listo.
Gracias.

Mikmoro · #6 (**permalink**) 10/12/2006, 17:21

Vaya, yo no veo ningún problema en la CSS. Puede ser algún problema generado por los datos que importa la tabla.

Puede que si los datos tienen unas líneas enormes sin espacios, quiero decir, muchos datos juntos sin espacios entre ellos, al no encontrar dónde dar el corte a la palabra para saltar de línea, la celda crezca hacia la derecha inevitablemente. Pero en ese caso, me extraña que en Firefox te funcione bien.

Como es html generado, igual podrías generar uno donde se vea el problema con datos falsos (inventados), y ponerlo a ver si podemos reproducir el problema.

Siento no ayudarte más.
Mikel.

ferrins · #7 (**permalink**) 11/12/2006, 03:36

<html>
<head>
<title>Gestor de continguts</title>
<style type="text/css" media="all">
@import "../estils/admin.css";
</style>
</head>
<body>
<div id="titol"><h1>GESTOR</h1></div>
<div class="logout"><div style="float:left; padding-left:5px">Avui és 11.12.06</div><a href="index.php">Inici </a>|<a href="logout.php"> Sortir</a></div>
<div id="menu"> // DIV MENU
<div class="opcio">Dades de suport</div>
<div class="opcions">
<ul>
<li><a href="info_suport.php?opcio=1" class="llista" >Insertar</a></li>
<li><a href="info_suport_mod.php" class="llista">Modificar</a></li>
</ul></div>
<div class="opcio">Insertar</div>
<div class="opcions">
<ul>
<li><a href="insert_noti.php?op=menu" class="llista">Notícies</a></li>
<li><a href="insert_art.php?op=menu" class="llista">Articles</a></li>
<li><a href="insert_review.php?op=menu" class="llista">Crítiques</a></li>
<li><a href="insert_concert.php?opcio=1" class="llista">Concerts</a></li>
<li><a href="insert_entrevista.php?op=menu" class="llista">Entrevistes</a></li>
<li><a href="insert_agenda.php?op=menu" class="llista">Agenda</a></li></ul></div>
<div class="opcio">Modificar</div>
<div class="opcions">
<ul>
<li><a href="menu_mod.php?opcio=notis" class="llista">Notis </a></li>
<li><a href="menu_mod.php?opcio=articles" class="llista">Articles</a></li>
<li><a href="menu_mod.php?opcio=reviews" class="llista">Crítiques</a></li>
<li><a href="menu_mod.php?opcio=concerts" class="llista">Concerts</a></li>
<li><a href="menu_mod.php?opcio=entrevistes" class="llista">Entrevistes</a></li>
<li><a href="menu_mod.php?opcio=agenda" class="llista">Agenda</a></li></ul></div>
<div class="opcio">Gestió Admins</div>
<div class="opcions">
<ul>
<li><a href="insert_admin.php?opcio=1" class="llista">Alta</a></li>
<li><a href="insert_admin.php?opcio=2" class="llista">Modificar</a></li>
</ul></div>
<div class="opcio">Gestió usuaris</div>
<div class="opcions">
<ul>
<li><a href="gest_usu.php" class="llista">Modificar</a></li>
</ul></div>
<div class="opcio">Gestió continguts</div>
<div class="opcions">
<ul>
<li><a href="gest_cont.php" class="llista">Insertar</a></li>
<li><a href="gest_cont.php?opcio=1" class="llista">Modificar</a></li>
</ul></div>
</div><div id="contenido"> notis<table> // DIV CONTENIDO Y TABLA GENERADA DINAMICAMENTE
<tr><td>Data</td>
<td>Titular</td>
<td>Admin</td>
<tr>
<td>11.12.06</td>
<td><a class="llista" href="veure_notis.php?id_noti=120"></a></td>
<td>Per admin</td>
</tr>
<tr>
<td>16.11.06</td>
<td><a class="llista" href="veure_notis.php?id_noti=119">kokoko</a></td>
<td>Per admin</td>
</tr>
<tr>
<td>16.11.06</td>
<td><a class="llista" href="veure_notis.php?id_noti=118">qwqwqwqw</a></td>
<td>Per admin</td>
</tr>
<tr>
<td>16.11.06</td>
<td><a class="llista" href="veure_notis.php?id_noti=117">fffffff</a></td>
<td>Per admin</td>
</tr>
<tr>
<td>16.11.06</td>
<td><a class="llista" href="veure_notis.php?id_noti=116">fffff</a></td>
<td>Per admin</td>
</tr>
<tr>
<td>16.11.06</td>
<td><a class="llista" href="veure_notis.php?id_noti=115">fffff</a></td>
<td>Per admin</td>
</tr>
<tr>
<td>16.11.06</td>
<td><a class="llista" href="veure_notis.php?id_noti=114">3333333</a></td>
<td>Per Josep</td>
</tr>
<tr>
<td>16.11.06</td>
<td><a class="llista" href="veure_notis.php?id_noti=113">Killswitch Engage per primer cop a Barcelona</a></td>
<td>Per Josep</td>
</tr>
<tr>
<td>16.11.06</td>
<td><a class="llista" href="veure_notis.php?id_noti=112">Això no flota</a></td>
<td>Per Josep</td>
</tr>
<tr>
<td>16.11.06</td>
<td><a class="llista" href="veure_notis.php?id_noti=111">q2222222</a></td>
<td>Per Josep</td>
</tr>
</table> // LOS ENLACES QUE SIGUEN SON LA PAGINACION DINAMICA
1 <a href="/pfc/fcases/admin/menu_mod.php?page=2&opcio=notis">2</a> <a href="/pfc/fcases/admin/menu_mod.php?page=3&opcio=notis">3</a> <a href="/pfc/fcases/admin/menu_mod.php?page=4&opcio=notis">4</a> <a href="/pfc/fcases/admin/menu_mod.php?page=5&opcio=notis">5</a> <a href="/pfc/fcases/admin/menu_mod.php?page=6&opcio=notis">6</a> <a href="/pfc/fcases/admin/menu_mod.php?page=7&opcio=notis">7</a> <a href="/pfc/fcases/admin/menu_mod.php?page=8&opcio=notis">8</a> <a href="/pfc/fcases/admin/menu_mod.php?page=9&opcio=notis">9</a> <a href="/pfc/fcases/admin/menu_mod.php?page=10&opcio=notis">10</a> <a href="/pfc/fcases/admin/menu_mod.php?page=2&opcio=notis">Següent>></a></center></div> // FIN DIV CONTENIDO
</body>
</html>

Bueno pues a ver que te parece, gracias por tu ayuda y si no ves nada raro no te preocupes ya imporvisaré algo.
Gracias!

Mikmoro · #8 (**permalink**) 11/12/2006, 06:09

Lo lamento pero yo lo veo perfectamente bien en firefox y en IE6. No puedo reproducir tu problema, porque según veo todo va bien.
Si es caso, aplica un tamaño al div que contiene la tabla:

width:70%;

De esa manera, podrás poner la tabla al 100% dentro de él y no debería crecer.
Mikel.

ferrins · #9 (**permalink**) 12/12/2006, 15:16

Hola otra vez!

Ciertamente si le pongo un width al div contendor me jode el invento porque la pagina es liquida, o sea que lo que carga dentro del div se adapta a este no importa la resolucion de pantalla, si le doy un porcentaje se acabó, Pero lo que voy a hacer es poner la tabla de dentro entre 60% y 70% de width entonces aunque no ocupa toda la pagina evita que salga el escroll, no me jode lo liquido de la pagina y aunque queda un poco ortopédico pues bueno, así es la vida amigos...

De todos modos muchas gracias Mikel por tu ayuda.

Mikmoro · #10 (**permalink**) 12/12/2006, 18:56

Me alegro de que hayas encontrado una solución aunque no te satisfaga del todo. No obstante, tal y como te pues, el div también puede ser líquido (70%, p.e.) y se adaptará a la resolución. Luego la tabla dentro a 98% y listo, para cualquier resolución.

Igual es lo que has probado y no te chuta, pero me extraña. Cuando la acabes y publiques ya dirás para verla. Que haya suertecilla.
Mikel.

merlin · #11 (**permalink**) 13/12/2006, 01:52

<table>
<tr><td>Data</td>
<td>Titular</td>
<td>Admin</td>

</tr>

<?
while($row = mysql_fetch_array($sql)){
$diahora= $row['diahora'];
$data = f_datef($diahora);
?> <tr>
<td><? echo $data; ?></td>
<td><a href="veure_notis.php?id_noti=<? echo $row['id_noti'];?>"><? echo $row['titol']; ?></a></td>
<td>Per <? echo $row['nick']; ?></td>
</tr>
<? } ?>
</table>

Mirando el código te falta un </tr> prueba a ver si es por eso... no lo he probado...

ferrins · #12 (**permalink**) 13/12/2006, 08:16

Buenassss

Gracias Merlin por tu apreciación pero la verdad es que he arreglado el error y no ha cambiado nada. Gracias igualmente.

Mikel, respecto lo de poner el div a 70% y la tabla a 98% con explorer va de maravilla pero con Mozilla se va al garete, hahaha es decir los dos navegadores responden exactamente diferente a la instrucción, pero bueno con un 66% a la tabla y listo y ya no me aparece el scroll en ninguno de los dos navegadores.

Gracias!