User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0) Gecko/20100101 Firefox/6.0 Build ID: 20110811165603 Steps to reproduce: I've styled TD cells using CSS to add a border (border: 1px solid #000;) Then, I am attempted to thicken the top border of certain TD cells in certain rows (mocking a horizontal rule). Sometimes this causes a mysterious border to be drawn randomly *within* a TD. Not surrounding it, but actually within the TD. Use the following HTML in Firefox 6 to replicate the problem: ============================================= <style type="text/css"> table { border-collapse: collapse; border-spacing: 0; } th, td { border: 1px solid #000; } td.redTopBorder { border-top: 5px solid red; } </style> <table> <thead> <tr><th>header</th> <th>header</th><th>header</th><th>header</th></tr> </thead> <tbody> <tr> <td rowspan="6" class="redTopBorder">info</td> <td class="redTopBorder">1</td> <td class="redTopBorder">a</td> <td class="redTopBorder" rowspan="6">zzz</td> </tr> <tr> <td>2</td> <td>b</td> </tr> <tr> <td>3</td> <td>c</td> </tr> <tr> <td>4</td> <td>d</td> </tr> <tr> <td>5</td> <td>e</td> </tr> <tr> <td>6</td> <td>f</td> </tr> <tr> <td rowspan="6" class="redTopBorder">info</td> <td class="redTopBorder">1</td> <td class="redTopBorder">g</td> <td class="redTopBorder" rowspan="6">The black line immediately above should not be there!</td> </tr> <tr> <td>2</td> <td>h</td> </tr> <tr> <td>3</td> <td>i</td> </tr> <tr> <td>4</td> <td>j</td> </tr> <tr> <td>5</td> <td>k</td> </tr> <tr> <td>6</td> <td>l</td> </tr> <tr> <td rowspan="4" class="redTopBorder">info</td> <td class="redTopBorder">1</td> <td class="redTopBorder">m</td> <td class="redTopBorder" rowspan="4">yyy</td> </tr> <tr> <td>2</td> <td>n</td> </tr> <tr> <td>3</td> <td>o</td> </tr> <tr> <td>4</td> <td>p</td> </tr> </tbody> </table> Actual results: Random horizontal border is drawn within the TDs. Expected results: These random borders shouldn't be there

Is this code in quirks or strict mode? (In other words: What't the <!DOCTYPE ... >, if any?)

I can reproduce on Win XP, 32bit. Attached the HTML provided in the description.

The bug is there regardless of strict mode, but I added strict header into the testcases.

Yes this bug occurs regardless of strict mode. Also I noticed the bug is very random. For instance, if I removed the entire last row, the problem disappears from that middle row. I have made larger tables with many more rows and the problem will then crop up multiple times. In addition, this table uses thead and tbody. If I remove thead and tbody, the problem doesnt occur.

If you change the declaration of the red border width to be 1px (instead of 2px): <style type="text/css"> table { border-collapse: collapse; border-spacing: 0; } th, td { border: 1px solid #000; } td.redTopBorder { border-top: 1px solid red; } </style> Two things happen: 1) The random line is gone. 2) Firefox ignores the border color. Borders appear black. In addition, if you remove the border-collapse condition, everything works as intended. There also must be something screwy with thead and tbody as noted in comment 5.

I guess that is not really a problem. The CSS spec defines which border wins when you have border-collapse: you are trying to paint border-bottom:black from the cell above, and border-top: red from the cell below into the same spot. There is an algorithm for it: http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#border-conflict-resolution

Thanks for the info on that, I think I am straying too far from the original bug. The random border stroke in the middle of the cell is still a bug I would assume? Two things I did notice specifically related to the random border: 1) If tbody and thead are not there, the problem doesnt seem to occur, at least in the example provided 2) Removal of border-collapse: collapse seems to render correctly 3) The problem seems to crop up more often when there are rowspans in play

Yes, that line is the bug. I can see it on linux too, FF7.

Almost certainly a duplicate of one of the existing [BC] bugs...