Tengo un problema por el cual he configurado 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.¿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?
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 el 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>
serio no puede ver nada que pudiera establecer el tamaño de fuente de 16px en el mesa. 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.
No deberían ser - para poner un navegador en modo peculiar tienes que hacerlo tú mismo, ¿no? Si ese es el caso, entonces no, no son ... Una cosa que acabo de pensar - ¿podría ser con el doctype? Solo que he usado Netbeans 6.9 para todas estas páginas, y nunca antes había sucedido en ninguna página. Me pregunto si tiene que ver con la declaración establecida por Netbeans al crear el archivo ... – ClarkeyBoy
Tenía razón, cambié de transición a estricto y funcionó bien. – ClarkeyBoy
El modo DOCTYPE y peculiaridades están inextricablemente vinculados: si no está utilizando un DOCTYPE válido, su navegador se renderizará en modo peculiar y, en el caso de FF, al menos, utilizando la hoja de estilo 'peculiaridades' que incluye estilos muy similares a los estás describiendo –