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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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,

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.