html - para - ¿Por qué una tabla no usa el tamaño de fuente del cuerpo a pesar de que no he establecido el tamaño de fuente de la tabla explícitamente?
tamaño letra html5 (5)
Tengo un problema por el cual he establecido el tamaño de fuente del cuerpo en 11px, pero las tablas muestran la fuente en 16px. No tengo idea de qué está causando esto. He estado revisando el CSS y el resultado (fuente al navegar a la página) una y otra vez. Definir el tamaño de fuente de la tabla a 11px tiene el efecto deseado explícitamente, pero no debería tener que configurarlo en ningún lugar aparte del estilo del cuerpo.
Tengo el siguiente CSS:
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0px;
background-color: #E7D2B8;
color: #863F2B;
}
img.headerImg {
width: 100%;
}
.menu-strip {
float: left;
width: 20%;
}
.main-content {
float: left;
width: 80%;
}
.clear {
clear: both;
}
ul.menu {
margin: 0px;
margin-left: 10px;
padding: 0px;
list-style: none;
}
ul.menu li {
margin: 0px;
padding: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
div.footer {
width: 60%;
margin-left: 20%;
}
ul.footer-links {
list-style: none;
}
ul.footer-links li {
float: left;
padding: 20px;
}
ul.footer-links li:last {
clear: right;
}
table {
width: 100%;
border-collapse: collapse;
}
td {
vertical-align: top;
}
... y la salida es la siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="/CustomerApp_v2/CSS/main.css" />
</head>
<body>
<div class="header">
<img class="headerImg" alt="Header image" src="/CustomerApp_v2/Images/header.png" />
</div>
<div class="menu-strip">
<ul class="menu">
<li>Home</li>
<li>Contacts
<ul class="menu">
<li>Customers</li>
<li><a href="/CustomerApp_v2/Agents/Agents.php">Agents</a></li>
<li>Artists</li>
<li>Suppliers</li>
<li>Other</li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<table>
<thead>
<tr>
<td>Code</td>
<td>Forename</td>
<td>Surname</td>
<td>Address</td>
<td>Postcode</td>
<td>Telephone</td>
<td>Fax</td>
<td>Edit</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=''7''></td>
<td><a href=''/CustomerApp_v2/Agents/Edit.php''>Create</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>code4</td>
<td>James</td>
<td>Blue</td>
<td>address11<br />address24<br />address32<br />town5<br /></td>
<td>postcode4</td>
<td>fone4</td>
<td>fone2</td>
<td><a href=''/CustomerApp_v2/Agents/Edit.php?ID=2''>Edit</a></td>
</tr>
<tr>
<td>code5</td>
<td>Fred</td>
<td>White</td>
<td>address13<br />address24<br />address31<br />town1<br /></td>
<td>postcode2</td>
<td>fone5</td>
<td>fone3</td>
<td><a href=''/CustomerApp_v2/Agents/Edit.php?ID=1''>Edit</a></td>
</tr>
</tbody>
</table>
</div><div class="clear"></div>
<div class="footer">
<ul class="footer-links">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</div>
</body>
</html>
Realmente no puedo ver nada que pueda establecer el tamaño de fuente en 16px en la tabla. Esto sucede para las 3 secciones (thead, tfoot, tbody). También parece que Netbeans 6.9 no formateará la tabla correctamente, pero guardará el resto del documento (antes y después). Es casi como si hubiera algo mal con la mesa, pero no puedo ver qué. Esto sucede en Firefox y Opera (las versiones más recientes de ambos). No lo he probado en IE porque nunca se usará en IE.
¿Alguna vez se preguntó por qué un <h1> ve GRANDE incluso cuando no usa ninguna regla de CSS?
Esto se debe a que los navegadores web tienen reglas de CSS predeterminadas integradas. Incluidos en este CSS predeterminado se encuentran las reglas para las tablas.
Desafortunadamente, estas reglas de CSS ocultas a veces juegan trucos desagradables a los desarrolladores web de nosotros, y esta es la razón por la que las personas usan Restablecer CSS .
Entonces, en algún lugar bajo el capó, FireFox ha decidido que hay una regla adicional ...
table {
font-size:16px; /* actually it''s "-moz-initial"
you can check this using FireBug
*/
}
Entonces tu regla es ...
body {
font-size:11px;
}
Ambas reglas tienen una specificity de 1, por lo que el navegador puede decidir un poco arbitrariamente lo que tiene prioridad.
Por lo tanto, para solucionar esto, dirígete a la mesa tú mismo:
table {
font-size:11px;
}
... O aumenta la specificity de tu regla.
html body { /* increased specificity! */
font-size:11px;
}
... O usa un Restablecer CSS .
¿Están los navegadores renderizados en modo peculiar? Al parecer, el modo peculiar crea un comportamiento heredado donde las tablas no se heredan correctamente:
Acabo de descubrir cuál es la respuesta: era el tipo de documento. Creo que Dreamweaver, Visual Studio y Eclipse PHP crean todos los archivos con doctype establecido en strict, mientras que netbeans lo establece en transitional. Cambia de transicional a estricto y la herencia del cuerpo a las tablas funciona bien.
Gracias por la ayuda de todos modos a todos.
Saludos,
Ricardo
Asegúrese de tener el DOCTYPE configurado correctamente (W3C tendrá detalles) ...
O
table {
font-size: 1em;
}
Y todo estará bien;)
No sé cuál es la razón para esto, pero desde que comencé con CSS y HTML hace 8 años, este siempre era el caso, las tablas no heredan el tamaño de letra del cuerpo. Lo mismo ocurre con los elementos seleccionados y de entrada.
Así que siempre hago algo como:
body, table, select, input {
font-size: 12px;
font-family: arial, tahoma, sans-serif;
}
Así que esto es una especie de solución, que funciona para mí.