hyperlink to get table cell to change color, stay in middle of table cell

Hello experts,

I'm designing a sidebar menu and I want the table cells to change color when hovered over.  I have accomplished this through css for the hyperlinks within the cells and using display:block to change the cells.  This all works fine and dandy, but I would prefer if the links were in the middle of the cells rather than at the top.  I have tried different settings to no avail, including vertical-align:middle, margin-top, etc.  All either do nothing or don't highlight the whole cell (such as in the case of margins).  Can anyone help me out here?  Thanks!

Here's some code I'm using....

The css:

a.menu:link {text-decoration:underline;color:#555555;display:block;width:100%;height:100%;background:#DDDDDD;}
a.menu:visited {text-decoration:underline;color:#555555;display:block;width:100%;height:100%;background:#DDDDDD;}
a.menu:hover {text-decoration:none;color:black;width:100%;display:block;height:50;background:#EEEEEE;}
a.menu:active {text-decoration:none;color:black;width:100%;display:block;height:50;background:#EEEEEE;}

the html:

<table align=center width=100% cellpadding = 0 cellspacing=0>
    <tr><tr><td valign=middle height=50 align=center class=leftbar><b><a href="WAstatetaxes.aspx" class=menu>Washington State Taxes</a></b></td></tr>
    <tr><td valign=middle height=50 align=center class=leftbar><b><a href="classactions.aspx" class=menu>Class Actions</a></b></td></tr>
    <tr><td valign=middle height=50 align=center class=leftbar><b><a href="bio.aspx" class=menu>Biography</a></b></td></tr>
    <tr><td valign=middle height=50 align=center class=leftbar><b><a href="links.aspx" class=menu>Links</a></b></td></tr>
    <tr><td height=400>&nbsp;</td></tr>

Who is Participating?
The slight problem with an .htc file is that it assumes javascript is enabled (it doesn't work without it).

See if this page helps you: http://bonrouge.com/br.php?page=tablemenus
In basics any element should be able to support the :hover pseudoclass and this rings true for all css2 browsers. That leaves you with Internet Explorer, which lacks the support you seek. However, Peter Nederlof has created a simple 'hack' to allow us the use of the :hover pseudoclass on any element in any current browser.
Have a look at his article: http://www.xs4all.nl/~peterned/csshover.html
It explains the use of his '.htc' file and how to enable it in your website. It also shows you an alternative way of creating a menu, as that's what :hover is most often used on. I think it'll be a verry interresting read for you.

Using the mentioned technique you won't have to meddle with the anchor anymore, or at least to a lesser degree and you'll be able to swtich the background of the table-cell instead, best of both worlds, wouldn't you say?

Good luck,

brianpsmith81Author Commented:
BonRouge,  thanks for the help, your code seems to work for the most part, however there is still some discrepancy between browsers.  http://www.seversonlaw.com/default.aspx is the page I am working on.  If you view it in IE7beta (and probably other versions of IE) it shows a 1px bottom border, but on hover, the highlighting does not reach to these borders.  In Firefox, it simply doesn't show the border.  My preference is for all browsers to show both the border and for the highlighting to fill the cell up completely.

/*table-menu 1*/

#tablemenu1 {
width: 100%;
margin: 0 auto;
#tablemenu1 td {
border-bottom-color: #EEEEEE;
#tablemenu1 td a {
#tablemenu1 td a:link, #tablemenu1 a:visited,
#tablemenu1 a:active{
color: #555555;
#tablemenu1 td a:hover {
color: #000000;
#tablemenu1 td {
text-align: center;
* html #tablemenu1 td a {height:1px;}
brianpsmith81Author Commented:
I guess I'll leave it the way it is, thanks.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.