Can anyone CSS-savy help me figure out the problem with a WebSVN setup?

Question

I'm a total newbie when it comes to CSS so I've pretty much given up on figuring out the problem here myself.

The problem I have is that my WebSVN installation has an odd problem related to viewing diffed files. There's some CSS that highlights the current line, but when I move my mouse up and down over the screen, the lines gets to be 1-2 pixels higher, or lower, depending on the direction I move the mouse.

Here, it's a bit difficult trying to explain it, here's an animated gif that shows the problem:

To try it yourself, go to my WebSVN repository here:

http://vkarlsen.serveftp.com:81/websvn/diff.php?path=/LVK_3_5/branches/controller_designer/LVK.Core/Reflection/TypeHelper.cs&rev=667&sc=1&repname=LVK

Unfortunately it seems Google Chrome (or whatnot) breaks the "clickability" of the above link, so to avoid problem I've just posted the actual link in text. You'll need to log in, but the username and password are both 'guest' without the quotes. Note that you'll probably get a warning about the certificate for the site. It's a private server so I'm not shelling out for a real certificate so just ignore that.

In Chrome, the browser I use, and Internet Explorer, the problem is visible.

Thanks, problem solved with the accepted answer, but my question was also partly this:

When you see, in the animated gif, or if you tried it, the mouse moving upwards, I understand that a CSS hover style for the line makes that line higher. However, the bottom lines in the illustration should not move once I am hovering over one line, even if I move the mouse cursor to another line. Granted, the line I was on, and the line I moved to, should shift, depending on the direction, because one lost the 1-2 pixels, and the other one gained them, but the text lines in the bottom of the illustration should not really move, should they? They should only move down 1-2 pixels when I move the mouse cursor into the list of lines to begin with, and only if I move it back out.

I just thought that particular behavior was rather odd.

Answer 1

Try changing:

tbody tr:hover td.diff, tbody tr.diffcode:hover td pre {
  background-color:#e8e8e8;
  border:1px solid #cccccc;
}

into

tbody tr:hover td.diff, tbody tr.diffcode:hover td pre {
  background-color:#e8e8e8;
}

Answer 2

Remember that CSS heights and widths do no include the padding, border and margin. So, if I have a box that has a height of 10 pixels, padding of 3 pixels and border of 1 pixel, the actual height will be 18 pixels: 10 height + 6 total padding top and bottom + 2 border top and bottom.

Answer 3

I think the issue is your borders aren't collapsing as you want them to.

You have a rule:

tbody tr:hover td.diff, tbody tr.diffcode:hover td pre {
    background-color: #E8E8E8;
    border: 1px solid #CCCCCC;
}

You're expecting the pre's border to merge with the td.diff's border. I think padding causes the borders not to collapse in the browsers, or it could be that pre isn't part of the table (I can't say which for sure).

Change the selector so it doesn't include the pre:

tbody tr:hover td.diff {
    background-color: #E8E8E8;
    border: 1px solid #CCCCCC;
}

This way, the pre doesn't get a border so it doesn't have to merge the border with td.diff.

Answer 4

The problem looks likes it's caused by the addition of the extra grey border when hovering over the element. Borders are applied outside the main area taken up by the element.

The simple fix for this is to set the non-hovered state to have a border of the same colour as the background, then only change the border-color property on hover.