Las filas de esta tabla se ven muy altas con Firefox!!!!

chugui · #1 (**permalink**) 03/10/2010, 20:03

tengo un pequeño problema con una tabla, el problema viene ocasionado por que empece a usar el reset.ccs de esta pagina [URL="http://www.objetivocreativo.com/reset.zip"]http://www.objetivocreativo.com/reset.zip[/URL] yo quiero mantener ese reset puesto a que toda mi web me esta funcionando bien el problema es solo esa tabla que no se ve bien en firefox pero en internet explorer y google chrome si....

si alguien sabe como arreglar este problema les agradeceria mucho! aqui les dejo un enlace que contiene la tabla

[URL="http://foros.emprear.com/html/cc/tdif.html"]http://foros.emprear.com/html/cc/tdif.html[/URL]

creditos a emprear que monto eso en la red y me ayudo a solventar un problema en un post anterior
[URL="http://www.forosdelweb.com/f4/bordes-internos-no-ven-con-i6-847257/"]http://www.forosdelweb.com/f4/bordes-internos-no-ven-con-i6-847257/[/URL]

el codigo CSS:

Código:

table{
 border-collapse: collapse;
  border: 1px solid #CCCCFF;
  width:200px;
  font: 70%	 "Verdana" Helvetica, sans-serif;
  color: #ECF6F0;
  background: #3399FF;
  }
 
caption {
  	color:#000000;
	font-size:1.1em;
  	background: transparent;
	padding:5px 10px 7px 5px;
	text-align:right;
	font-weight:700;
	text-transform:uppercase;
  }
  
  
tbody tr{
/* position:relative; */
  background: #3399FF;
}
  
td, th {
  border: 1px dashed #99CCFF;
  padding: .4em;
  color: #F0ECF6;
  }
 
th { 
	font-weight:700;
 
}
  
thead th, tfoot th {
  font: bold 0.9em verdana, arial, helvetica, sans-serif;
  border: 1px solid #99CCFF;
  text-align: left;
  background: #6666FF;
  color: #F0ECF6;
  padding-top:6px;
  }
  
tbody td a {
  background: transparent;
  text-decoration: none;
  color: #F0ECF6;
  }
  
tbody td a:hover {
  background: transparent;
  text-decoration: underline;
  color: #FFFFFF;
  }
  
tbody th, tbody td {
  vertical-align: top;
  text-align: left;
  }
  
tfoot td {
  border: 1px solid #CCCCFF;
  background: #6666FF;
  padding-top:6px;
  font: bold 0.9em verdana, arial, helvetica, sans-serif;
  text-align:right;
  }
  
tfoot th a, tfoot td a {
  font: normal 1em verdana, arial, helvetica, sans-serif;
  background: transparent;
  text-decoration: none;
  font-weight:normal;
  color: #F0ECF6;
  }
  
tfoot th a:hover, tfoot td a:hover {
  background: transparent;
  text-decoration: underline;
  color: #FFFFFF;
  }
 
tbody tr.odd{
  background: #6699FF;
  }
  
tbody tr:hover, tbody tr.odd:hover{
  background: #0066FF;
  }

el codigo HTML

Código:

<!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">
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Documento sin t&iacute;tulo</title>
		<link href="css/reset/reset.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="css/table.css" />
</head>

<body>
		        <table cellpadding="0" cellspacing="0">
                  <thead>
                    <tr>
                      <th scope="col">Top</th>
                      <th scope="col">Usuario</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row">1</th>
                      <td>&nbsp;</td>
                    </tr>
                    <tr class="odd">
                      <th scope="row">2</th>
                      <td><a href="#"> cargaulairtiona</a></td>
                    </tr>
                    <tr>
                      <th scope="row">3</th>
                      <td>&nbsp;</td>
                    </tr>
                    <tr class="odd">
                      <th scope="row">4</th>
                      <td>&nbsp;</td>
                    </tr>
                    <tr>
                      <th scope="row">5</th>
                      <td>&nbsp;</td>
                    </tr>
                    <tr class="odd">
                      <th scope="row">6</th>
                      <td>&nbsp;</td>
                    </tr>
                    <tr>
                      <th scope="row">7</th>
                      <td>&nbsp;</td>
                    </tr>
                    <tr class="odd">
                      <th scope="row">8</th>
                      <td>&nbsp;</td>
                    </tr>
                    <tr>
                      <th scope="row">9</th>
                      <td>&nbsp;</td>
                    </tr>
                    <tr class="odd">
                      <th scope="row">10</th>
                      <td>&nbsp;</td>
                    </tr>
                  </tbody>
                  <tfoot>
                    <tr>
                      <th scope="row"></th>
                      <td><a href="#">ver Top 500 &raquo;</a></td>
                    </tr>
                  </tfoot>
                </table>
		        
</body>
</html>

zerokilled · #2 (**permalink**) 03/10/2010, 20:16

en firefox -y creo que en todos los motores gecko- eso sucede porque la propiedad font-size en las celdas no heredan el valor de elementos ancestros. en la hoja de estilo agregale un valor a la propiedad font-size para las celdas.

chugui · #3 (**permalink**) 03/10/2010, 21:26

para probar lo que me dices, hice lo siguiente en el CSS y nada!!!!

td, th {
border: 1px dashed #99CCFF;
padding: .4em;
color: #F0ECF6;
font-size: 7px;
}