Question

I have a table where I set a kind of button on mouseover the cell. Then problem is that when I move between columns, we can see the current column a little more wide than others. Difficult to explain.

Here is a little video of demonstration: http://screencast.com/t/WbHIlSHim

How can we avoid it?

Here is my css

#MatrixTable td
{
    padding: 0px;
    height: 30px;
    text-align: center;
    vertical-align: middle;    
}

#MatrixTable:hover
{
    cursor: default;
}

#MatrixTable td a:hover
{
    cursor: none;
}

#MatrixTable td:first-child
{
    padding-left: 5px;
    text-align:left; 
}

#MatrixTable td a
{
    padding: 8px 10px;
    cursor: default;
}

Thanks.

---

UPDATE

Here is a jsfiddle: http://jsfiddle.net/Q35f7/

Answer 1

Well, most generally it’s because the CSS changed when you added the new class, adding a whole lot of other stuff. The offending changes that created the size change were padding, border and a few others, which will always alter the size of the object.

For example, if you added .class:hover{border: 500px solid #000;} on mousover, that element would get a heck of a lot bigger when you hovered over it. A similar effect would happen if you did .class:hover{padding:9999px;}. See what I’m getting at here?

I’ve edited it for you removing the style rules that would create the “annoying” size change:

http://jsfiddle.net/Q35f7/1/