Ho un problema con il quale ho impostato la dimensione del carattere del corpo a 11px, ma le tabelle mostrano font a 16px. Non ho idea di cosa stia causando questo - sono stato sopra il CSS e l'output (fonte durante la navigazione verso la pagina) più volte. L'impostazione della dimensione del carattere della tabella su 11px ha l'effetto desiderato, ma non dovrei aver bisogno di impostarla a prescindere dallo stile del corpo.Perché una tabella non utilizza la dimensione del carattere del corpo anche se non ho impostato la dimensione del carattere della tabella esplicitamente?
Ho il seguente 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;
}
... e l'uscita è la seguente:
<!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>
ho seriamente posso vedere tutto ciò che potrebbe impostare il font-size a 16px nel tavolo. Questo succede per tutte e 3 le sezioni (thead, tfoot, tbody). Sembra inoltre che Netbeans 6.9 non formatta correttamente la tabella, ma fa il resto del documento (prima e dopo). È quasi come se ci fosse qualcosa di sbagliato nel tavolo, ma non riesco a vedere cosa. Questo succede in Firefox e Opera (versioni più recenti di entrambi). Non l'ho provato in IE perché non sarà mai usato in IE.
Non dovrebbero essere - per mettere un browser in modalità quirks devi farlo da solo, giusto? Se questo è il caso allora no, non lo sono .. Una cosa che ho appena pensato - potrebbe essere a che fare con il doctype? Solo io ho usato Netbeans 6.9 per tutte queste pagine, e non è mai successo in nessuna pagina prima d'ora. Mi chiedo se abbia a che fare con la dichiarazione impostata da Netbeans durante la creazione del file .. – ClarkeyBoy
Avevo ragione - ho cambiato il passaggio a rigoroso e ha funzionato bene! – ClarkeyBoy
La modalità DOCTYPE e stranezze sono collegate in modo inestricabile: se non si utilizza un DOCTYPE valido, il browser eseguirà il rendering in modalità quirks e, nel caso FF, almeno, utilizzando il foglio di stile 'quirks' che include stili molto simili a quelli stai descrivendo. –