Question

I have a table and one side of the table is an array of links. Currently I have a background color change on hover to make it appear as if the cell in the table has been pressed. The problem with this is, after setting the display:block property on the cells, when the cell is hovered over it leaves out the rounded edges and looks bad. Any way to deal with this?

CSS

.bigtable {

    text-align:left;
    padding:0px 5px 0px 5px;
    color:white;
    border: 2px solid #999999;
    margin:0px 5px 0px 5px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
    text-shadow:0 1px 1px white;
    font-size:x-large;
}
td {
    padding: 5px 5px 5px 5px;
    background-color:#0063dc;
    -moz-border-radius:20px;
    -webkit-border-radius:10px;
    border-radius:10px;
    text-shadow:0 1px 1px black;


}
td a:hover {
    display:block;  
    background-color:blue;

}

snippet of table:

<table style="width: 100%; height: 730px;" cellspacing="5" cellpadding="5" class="bigtable">
                    <tr>
                                    <td>news</td>
                                    <td><ahref="">click on this box to read about what is 
                                    mmunity</a></td>
                    </tr>
                    <tr>

i know what the problem is, but i don’t know how to fix it. it’s the td a:hover part of the CSS that’s doing it what i’m telling it to. how can i instruct the hover of a link to change the ENTIRE td color, not just the link part?

Answer 1

According to the spec, this is how border-radius in CSS3 works. The content inside the box with the radius “bleeds” through the rounded corner.

You’ll have to give your links a border-radius as well.