CODEWITHSUNDEEP
css
Justin808
Justin808

Reputation: 21512

CSS border issues when using :hover on the tr

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!

Upvotes: 14

Views: 22149

Answers (3)

James Khoury
James Khoury

Reputation: 22319

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.

Upvotes: 35

alt
alt

Reputation: 13907

Make sure your border is set to the INSIDE instead of the outside. Unfortunetly, the inset option for borders is not yet part of CSS. Here's a bit of CSS to make the borders inside the element using box shadows:

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

That will make a 1px black border on the INSIDE of your element! :D I hope this helps, if you're set on a black dotted border, your only option is to set absolute positioning, and position each table row individually, which is a pain in the ass. :/ If you've got relative or static positioning, elements will move when other increase in size. Wulf's idea may work with a little configuring, but to be honest, the box shadow is a much nicer border then the dotted one. (a bit tacky if I say so myself. ^_^ Sorry.)

Upvotes: 2

Wulf
Wulf

Reputation: 3898

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

Upvotes: 2

Related Questions