Pourquoi un tableau n'utilise-t-il pas la taille de police du corps alors que je n'ai pas défini explicitement la taille de police du tableau?
J'ai un problème où j'ai défini la taille de police du corps à 11 pixels, mais les tableaux affichent la police à 16 pixels. Je n'ai aucune idée de ce qui cause cela - j'ai parcouru le CSS et la sortie (source lors de la navigation sur la page) maintes et maintes fois. Définir la taille de police de la table à 11 pixels a explicitement l'effet souhaité, mais je ne devrais pas avoir besoin de le définir ailleurs que dans le style du corps.
J'ai le CSS suivant:
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;
}
... et la sortie est la suivante:
<!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>
Je ne peux vraiment pas voir quoi que ce soit qui pourrait définir la taille de la police à 16 pixels dans le tableau. Cela se produit pour les 3 sections (thead, tfoot, tbody). Il semble également que Netbeans 6.9 ne formatera pas correctement le tableau, mais il fait le reste du document (avant et après). C'est presque comme s'il y avait quelque chose de mal avec la table, mais je ne vois pas quoi. Cela se produit dans Firefox et Opera (versions les plus récentes des deux). Je ne l'ai pas testé dans IE car il ne sera jamais utilisé dans IE.
Les navigateurs sont-ils rendus en mode bizarreries? Apparemment, le mode excentrique recrée certains comportements hérités où les tables n'héritent pas correctement:
Vous êtes-vous déjà demandé pourquoi un <h1> semble GRAND même si vous n'utilisez aucune règle CSS?
Cela est dû au fait que les navigateurs Web ont des règles CSS par défaut intégrées. Inclus dans ce CSS par défaut sont des règles pour les tableaux.
Malheureusement, ces règles CSS cachées jouent parfois de mauvais tours aux développeurs Web, et c'est pourquoi les gens utilisent Reset CSS .
Donc, quelque part sous le capot, FireFox a décidé qu'il y avait une règle supplémentaire ...
table {
font-size:16px; /* actually it's "-moz-initial"
you can check this using FireBug
*/
}
Alors votre règle est ...
body {
font-size:11px;
}
Ces deux règles ont une spécificité de 1, donc le navigateur peut décider un peu arbitrairement ce qui a la priorité.
Donc, pour résoudre ce problème, ciblez la table vous-même:
table {
font-size:11px;
}
... Ou augmentez la spécificité de votre règle.
html body { /* increased specificity! */
font-size:11px;
}
... Ou utilisez un Reset CSS .
Je ne sais pas pourquoi, mais depuis mes débuts avec CSS & HTML il y a 8 ans, cela a toujours été le cas, les tables n'héritent pas de la taille de police du corps. Il en va de même pour les éléments de sélection et d'entrée.
Donc je fais toujours quelque chose comme:
body, table, select, input {
font-size: 12px;
font-family: arial, tahoma, sans-serif;
}
C'est donc une sorte de solution de contournement, qui fonctionne pour moi.
Assurez-vous que le DOCTYPE est correctement défini (le W3C aura des détails) ...
OR
table {
font-size: 1em;
}Et tout ira bien;)
Je viens de découvrir quelle est la réponse - c'était le doctype. Je pense que Dreamweaver, Visual Studio et Eclipse PHP créent tous les fichiers avec doctype défini sur strict, tandis que netbeans le définit sur transitionnel. Changez transitionnel sur strict et l'héritage du corps aux tables fonctionne très bien.
Merci pour l'aide de toute façon tout le monde.
Cordialement,
Richard