Open Bug 883654 Opened 11 years ago Updated 2 years ago

Table rendering issue with border-collapse

Categories

(Core :: Layout: Tables, defect)

21 Branch
x86_64
Windows 7
defect

Tracking

()

UNCONFIRMED

People

(Reporter: rfvz, Unassigned)

References

()

Details

Attachments

(3 files)

Attached image Rendered example
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:21.0) Gecko/20100101 Firefox/21.0 (Beta/Release)
Build ID: 20130511120803

Steps to reproduce:

1. A table must have collapsed borders and zero padding. 
2. Table and cell borders must be visible
3. One cell of the table must contain fixed size div with visible background.
4. One pixel vertical line would appear once page is rendered with 100% zoom level. The issue seems to be linked to other elements present on the page. I was unable to replicate it with only div and a table. However same code placed into jsfiddle reproduces the error.

Example: http://jsfiddle.net/FeuBx/

More details: http://stackoverflow.com/questions/17077213/table-rendering-issue-in-firefox-with-border-collapsecollapse


Actual results:

White vertical line is rendered between cell border and div.


Expected results:

Contents of the table cell should be rendered touching the cell border (with no padding).
Positions of JSfiddle panes does matter. If example above is not reproducing the bug for you, please try resetting jsfiddle to default settings (clearing local site data).
Size of FF window also does matter, sometimes horizontal line also appear between cell border and the div. If you resize window horizontally very slowly the vertical line will appear and disappear constantly.
Component: General → Layout: Tables
Attached file Reporter's testcase
With FF21 and default zoom, I don't repro the issue.
With FF24 and default zoom (and HiDPI awareness), I repro the issue.

In FF24 changing the zoom level makes the white line appear vertically or hozizontally.
I can confirm this bug exists on FF 24.0.
Attached image badEdge.jpg
Here is another example of this same bug.
Here is CSS in which I ran into bug. Only html in table was border="0" in table tags.

.rowClass td {
	padding: 10px;
	text-align:center;
	border: 2px solid #444444;
}

#tableID {
	background-color:#FFFFFF;
	width: 600px;
	border: 3px solid #444444;
	border-collapse: collapse;
	border-spacing:0;
}
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: