Topic: Problem with colors in a menu
Hello,
On a Web site, I still use <table> and I have a problem.
In a menu, the background-color of a cell changes when the pointer of the mouse is hover and the color of the fonts doesn't change.
I have this in my HTML :
<table cellspacing="0" cellpadding="5">
<tr>
<td class="menu" onmouseover="this.className='menu-hover'" onmouseout="this.className='menu'"><a class="menu" href="lien_1.htm">Lien 1</a></td></tr></table>And in my CSS :
.menu, a.menu:visited
{
color: #444;
background-color: #eee;
font-weight: bold;
text-decoration: none;
}
a.menu:hover
{
color: #444;
background-color: #ddd;
}
td.menu
{
color: #444;
background-color: #eee;
width: 140px;
}
td.menu-hover
{
color: #444;
background-color: #ddd;
width: 140px;
}When the pointer of the mouse passes on the cell, the color of this one changes but the color of the words changes of course only if I pass precisely on the link.
I cannot delete the part CSS referring to the color and the background-color of the link of the menu under penalty of having a "warning" when I try to validate my CSS via the W3C.
---
A solution that I found is to work with property ONCLICK directly in a cell.
In my new HTML I have :
<table cellspacing="0" cellpadding="5">
<tr>
<td class="menu" onclick="location='lien_1.htm'" onmouseover="this.className='menu-hover'" onmouseout="this.className='menu'">Lien 1</td></tr></table>And in my new CSS I have only :
td.menu
{
font-weight: bold;
color: #444;
background-color: #eee;
width: 140px;
}
td.menu-hover
{
color: #444;
background-color: #ddd;
width: 140px;
cursor: crosshair;
}Everything is OK... but I think that Google and other search engines don't follow links with ONCLICK.
A solution ?
Sorry for the length of my message.
Thanks 