CSS border issues when using: hover over tr

Question

I am trying to highlight the row where the mouse is in the data table. I am trying to do this with a border and a lower border. To facilitate readability, I also have transparent transparent png on alternate lines.

It seems that when I turn borders on and off (works in IE8 + and FF), the rows bounce a bit. I think I can fix this by having a transparent frame without freezing, and not at all. Is this x-browser compatible now?

In Chrome, the selected line border does not disappear when you move the mouse from the line, why?

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

Update: I fixed a problem with the border in chrome where they will not disappear. I moved the border to TD, not TR. Lines are still jumping.

Thanks!

Answer 1

set a transparent border to your normal state elements.

When applying :hover size of the frame changes the size that the element occupies.

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 working properly)

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

set the transpersonal boundary to tr

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

And to freeze, do something like:

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

Borders td will be displayed ABOVE line boundaries.

Answer 2

An easier way is to add "margin-top: -1px; margin-bottom: -1px;" for style: hover, this corrects the new height using the border.

Answer 3

Make sure your border is set to INSIDE and not outside. Unfortunately, the insert option for borders is not yet part of CSS. Here's some CSS to draw borders inside an element using window shadows:

 .mytable tr:hover { -moz-box-shadow: inset 0 0 1px #000; } 

This will make the 1px black border INSIDE your element !: D Hope this helps if you are set to the black dotted border, the only option is to set the absolute positioning and put each row of the table separately, which is a pain in the ass.: / If you have relative or static positioning, elements will move with another increase in size. The Wulf idea might work with a little tweaking, but frankly, the box shadow is much better than the dashed one. (a bit sticky if I say so. ^ _ ^ Sorry.)