I have a table where the cells all have a 1px top-border, except the first column, which has a background image to replicate a 1px bottom border (the border fades out to the left). In all browsers (Chrome, Safari, IE6+) the 'fake border' lines up with the 'real border' - except in Firefox, where the fake border is 1px too low. If I manually move the image 1px up, it disappears altogether.
I imagine that Firefox handle the extra 1px border differently. If there is a cell with a border next to a cell without a border, Firefox seems to leave a space where the border should be, whereas other browsers expand the border-less cell by 1px, so my images can take up that space. (I hope that makes sense!)
Does anyone know of a fix for this?
Working example: http://resonantmind.net/temp/compare.php
1. I tried the -1px as well but I set the height to 50px. Not exactly what you want but seems to be on the right path.
.compare .item {
background:#fcfcfc url(bg-compare-item.gif) no-repeat 0 -1px;
height:50px;
/* original */
text-align:left; line-height:29px !important; border:0;
}
2. Another solution is to shift the top line on the image down 1px and completely remove the bottom line. Then have the -1px in the CSS and you'll get the desired results. Looks good in Chome, IE9, and Firefox.