asked on

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> </td></tr>
</table>

Thanks!

SOLUTION

mreuring

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

BonRouge

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

brianpsmith81

ASKER

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;
border-collapse:collapse;
table-layout:fixed;
}
#tablemenu1 td {
width:25%;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-width:0px;
border-right-width:0px;
border-top-width:0px;
border-bottom-color: #EEEEEE;
}
#tablemenu1 td a {
text-decoration:none;
display:block;
padding:8px;
}
#tablemenu1 td a:link, #tablemenu1 a:visited,
#tablemenu1 a:active{
color: #555555;
background-color:#DDDDDD;
}
#tablemenu1 td a:hover {
color: #000000;
background-color:#EEEEEE;
}
#tablemenu1 td {
text-align: center;
}
* html #tablemenu1 td a {height:1px;}

brianpsmith81

ASKER

I guess I'll leave it the way it is, thanks.