Some SharePoint 2010 css that just baffles me

Whilst trying to apply custom .css styles to a SharePoint 2010 site with a company colour scheme.  When it came to highlighting the current on hover list item.  See picture below.

I just could not find out how to fix the issue where sometimes it appears it is 1px height out therefore the inner cell overlaps the border that is governing the row as shown in the image above.  As you can see it works on some rows but not others as the row height is not constant.

I found the css class was

td.ms-vb-title div.s4-ctx:hover
{
border-color:transparent!important;
background-color:#E7EBD6!important;
}

The background colour and border colour was set accordingly.

The height property would govern the cell.  But setting it to any height would mean it would sometimes fit in some cells but not others.  Setting it to height:auto did not work either.  Umm. 

A rather cop out way was to turn the div.s4-ctx:hover or div.s4-ctx, s4-ctx-show height to 0px.

This meant the highlight shade won't show since the div been set to 0px height, only allowing the onmouseover arrow image to show.