a:hover and table problem driving me nuts!

[WebMasterLudwig]

I've write the followong html code:

<table width="100%" cellspacing="0" cellpadding="0" style="border: 1px solid #000000;">
<tr>
<td width="100%">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr align="center">
<td class="navItem"><a href="#">Home</a></td>
<td width="1" height="25" bgcolor="#FFFF00"><img src="graph/spacer.gif" width="1" height="25"></td>
<td class="navItem">¦</td>
<td class="navItem"><a href="#">Agenda</a></td>
<td class="navItem">¦</td>
<td class="navItem"><a href="#">Info</a></td>
<td class="navItem">¦</td>
<td class="navItem"><a href="#">Archief</a></td>
<td class="navItem">¦</td>
<td class="navItem"><a href="#">Toogklap</a></td>
<td class="navItem">¦</td>
<td class="navItem"><a href="#" >Links</a></td>
<td class="navItem">¦</td>
<td class="navItem"><a href="#">Webmail</a></td>
<td class="navItem">¦</td>
<td class="navItem"><a href="#">golf.vjo.org</a></td>
</tr>
</table>
</td>
</tr>
</table>

an the css is:

.navItem {
font-size: 14px;
color: #000000;
background-color: #FFFF00;
text-align: center;
vertical-align: middle;
height: 20px;

}

.navItem a:link {
color: #000000;
text-decoration: underline;
}
.navItem a:visited {
color: #000000;
text-decoration: underline;
}

.navItem a:active {
color: #000000;
text-decoration: underline;
}

.navItem a:hover {
color: #FFFF00;
background-color: #000000;
text-decoration: underline;
width: 100%;
height: 25px;

}

The problem: the a:hover thin causes the link to change it's place (it jumps up in IE6) when it's clicked, and in Netscape 7, it doesn't work at all
I can't seem to find my error and it's driving me insane...

[encyclo]

Welcome to WebmasterWorld [webmasterworld.com], WebMasterLudwig.

You appear to be defining a width and height on the a:hover which is not present on a:link:

.navItem a:hover { 
color: #FFFF00; 
background-color: #000000; 
text-decoration: underline; 
width: 100%; 
height: 25px; 
}

So, when you hover over a link, the height and width will change from the default. On your navitem you have a height of only 20px:

.navItem { 
... 
height: 20px; 
}

This may well be the reason why you're having problems.

[WebMasterLudwig]

Wow, do they always answer so fast at this forum?

Anyway: thank you: problem is solved now :)

(and i used line-height: 25px; instead of height: 25px, cause with height: 25px, the vertical alignment wasn't right)