We help IT Professionals succeed at work.

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

Medium Priority
Last Modified: 2008-01-09
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>

Watch Question

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,


Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
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


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;}


I guess I'll leave it the way it is, thanks.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.