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

Posted on 2006-03-23
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: {text-decoration:underline;color:#555555;display:block;width:100%;height:100%;background:#DDDDDD;} {text-decoration:underline;color:#555555;display:block;width:100%;height:100%;background:#DDDDDD;} {text-decoration:none;color:black;width:100%;display:block;height:50;background:#EEEEEE;} {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>

Question by:brianpsmith81
    LVL 17

    Assisted Solution

    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:
    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,

    LVL 4

    Accepted Solution

    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:
    LVL 3

    Author Comment

    BonRouge,  thanks for the help, your code seems to work for the most part, however there is still some discrepancy between browsers. 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;}
    LVL 3

    Author Comment

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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now