Altura de Fila menor a 20px?

morfasto · #1 (**permalink**) 15/11/2011, 21:13

Hola, que tal?

Estoy tratando de hacer que la altura de una fila sea menor a 20px pero no logro hacerlo, se puede? estoy haciendo algo mal?

html

Código HTML:

Ver original<table>
    <tr>
        <td id="titulo">Titulo del Video</td>
    </tr>
    <tr>
        <td id="nombre">Nombre Apellido</td>
    </tr>
</table>

css

Código CSS:

Ver original#titulo{
    height:25px;
    font-size:20px;
}#nombre{
    height:10px;
    font-size:10px;
}

linuxzero · #2 (**permalink**) 16/11/2011, 07:41

El css no parece estar mal, lo que si tenes que tener en cuenta que el tamaño de letra es el que rige antes que la altura de la celda, porque si vos tenes que el tamaño de letra de de 20px, la celda jamas va a ser mas chico que eso, a menos de que bajes el tamaño de letra, despues de eso, el css no parece estar mal... a menos que lo estes probando en IE6 :P

morfasto · #3 (**permalink**) 16/11/2011, 09:11

Lo he provado con letra de 1px y tampoco funciona, alguien sabe que puede estar pasando?

Tambien lo probe en Google Chrome, en Fire Fox y en Internet Explorer 9.

emprear · #4 (**permalink**) 16/11/2011, 09:40

No deberías tener problemas, si bien dependiendo del tipo de fuente y el navegador, hay un tamaño minimo para las fuentes, con respecto a la altura de las celdas, podes fijarlo con css.
Además pòdes forzar la altura de la linea con line-height (#edad en el ejemplo),
Revisá este ejemplo, le agregue un borde para diferenciar las celdas, y a la ultima se lo quité para que resalte el color.

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">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
table td {
border: solid 1px #000;
padding: 0;
}
 
#titulo{
height:20px;
font-size:20px;
}
 
#domicilio{
height:16px;
font-size:16px;
}
 
#nombre{
height:12px;
font-size:12px;
}
 
#telefono{
height:10px;
font-size:10px;
}
#edad{
height:8px;
font-size:8px;
line-height: 4px;
}
 
#rojo{
height:2px;
background-color: red;
border: none;
}
 
/*]]>*/
</style>
</head>
<body>
<table>
    <tr>
        <td id="titulo">Titulo del Video</td>
    </tr>
        <tr>
        <td id="domicilio">Av libertador</td>
    </tr>
    <tr>
        <td id="nombre">Nombre Apellido</td>
    </tr>
        <tr>
        <td id="telefono">2345 2123</td>
    </tr>
            <tr>
        <td id="edad">23</td>
    </tr>
                <tr>
        <td id="rojo"><!-- fix --></td>
    </tr>
</table>
</body>
</html>

Saludos