How to set CSS for <td> background-color in a sitemap

Question

Hi, I have the same problem as http://stackoverflow.com/questions/1041833/possible-to-fill-a-table-cell-with-a-bg-color.

The problem is that i'm using a sitemap and not sure how to set the css for the td tags.

(This works fine in firefox and IE8, but not IE7)

I'm using the following CSS:

.subMenu
{
    z-index: 100;
    min-width: 118px;
    border: solid 1px #545454;
    text-align: center;
}
.subMenuItem
{
    width: 100%;
    min-width: 118px;
    padding: 5px;
    border-bottom: solid 1px #545454;
    background-color: #4D97CB;
    color: #DDDDDD;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
}

which gives the folloing HTML:

<div id="ctl00_mnuNavigationn1Items" class="ctl00_mnuNavigation_0 subMenu ctl00_mnuNavigation_7">
    <table border="0" cellpadding="0" cellspacing="0">
     <tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_mnuNavigationn3">
      <td>
       <table class="subMenuItem ctl00_mnuNavigation_6" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
         <td style="white-space:nowrap;width:100%;">
          <a class="ctl00_mnuNavigation_1 subMenuItem ctl00_mnuNavigation_5" href="/Asidua.BPM.Web.WebApplication/Expenses/Default.aspx" style="border-style:none;font-size:1em;">Click here</a>
         </td>
        </tr>
       </table>
      </td>
     </tr>
    </table>
</div>

Answer 1

You must apply the CSS style to the td element instead of the a element. A span-like element (like a link, or em, strong, or span) does not support setting the background by default.

[EDIT] If you don't generate this code yourself, then you have these options:

1. Get the source of the HTML/CSS generator and modify it to add the necessary CSS attributes to the td elements

2. If this is on the server, check whether you can add a filter to the output of your app. This filter can then add the necessary CSS.

3. If everything else fails, you can use JavaScript on the client to navigate the DOM and add the attributes in onload.

Answer 2

Another solution could be to set the a element to display:block in the CSS. That would make it fill the entire area of the parent element.

Also, if it's a background-color, you may need to set the height and width of the a element to match the parent's.