Question

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

Answer 1

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.