CSS border issues when using :hover on the tr

Question

I'm trying to highlight the row the mouse is over in a table of data. I'm trying to do this with a border-top and border-bottom. To help the readability i also have a light transparent png on alternate rows.

It seems that when I turn on and off the borders (works in IE8+ and FF) the rows jump around a little. I think I can fix it by having a a non-hover transparent border, rather than none at all. Is this x-browser compatible now days?

In Chrome, the highlighted row's border does not go away when you move the mouse off the row, why?

http://justinzaun.com/Tree/people/

Update: I've fixed the border issue in chrome where they wouldn't go away. I moved the border to the TDs rather than the TR. The rows are still jumping around though.

Thanks!

Answer 1

put an transparent border on your normal state elements.

When the :hover is applied the size of the border changes the size the element takes up.

eg:

.myelement
{
        border:4px solid transparent;
}

.myelement:hover
{
    border: 4px solid green;
}

http://jsfiddle.net/mPmRA/

EDIT:- more specifically to your table (ugh: tables ... collapse border makes the above not work properly)

http://jsfiddle.net/mPmRA/1/

put the transperant border on the tr

tr
{
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
}

And for the hover do something like:

tr:hover td
{
    border-top:4px solid green;
    border-bottom:4px solid green;
}

The td borders will then appear ABOVE the row's border.