<table class="main">
<tr>
<td onmouseover="this.className='hover'" onmouseout="this.className=''" onclick="self.location.href='pages.php'">
<img src="./images/document.png" alt="" height="48" /><br />
Pagina's
</td>
<td onmouseover="this.className='hover'" onmouseout="this.className=''" onclick="self.location.href='menu.php'">
<img src="./images/text_tree.png" alt="" height="48" /><br />
Menu
</td>
</tr>
</table>
en
* {
margin:0px;
padding:0px;
}
body {
font:12px Verdana, Sans-Serif;
color:#036;
background:#3588bc;
}
td {
font:12px Verdana, Sans-Serif;
}
h4, th {
font:13px Verdana, Sans-Serif;
font-weight:bold;
}
[..]
#content {
border:solid 1px #000;
margin:10px;
padding:5px;
background:#99cee6;
}
[..]
table.menu {
border:solid 1px #000;
background:#CCC;
}
table.menu th {
height:25px;
}
table.menu td, table.menu th {
border:solid 1px #000;
background:#FFF;
text-align:center;
padding:2px;
}
table.menu .small {
width:25px;
}
table.menu .big {
width:300px;
text-align:left;
padding-left:10px;
}
table {
margin:20px;
}
table.main td {
text-align:center;
width:80px;
height:80px;
border:solid 1px #99cee6;
cursor:pointer;
font:12px Verdana, Sans-Serif;
color:#036;
}
table.main td.hover {
background:#369;
border:solid 1px #000;
color:#FFF;
}
[..]
Maar toch wordt de style niet toegepast. Als ik in de de CSS gewoon 'table td' ipv table.main td dan werkt het wel, maar dan worden alle tabellen aangepast, en dat is niet de bedoeling.
Ziet iemand wat ik verkeerd doe? Of weet iemand wat er mis gaat? Het probleem doet zich in alle browsers voor die ik getest heb (Opera, FireFox en IE)
Betreffende pagina
Edit
Oke, en blijf verder lekker van de pagina af. Het is alleen om de bron te kunnen bekijken, niet om te testen!