URL: https://codepen.io/MoritzKn/pen/BaNqbee
Browser / Version: Firefox 74.0
Operating System: Mac OS X 10.15.3
Tested Another Browser: Yes Chrome
Problem type: Design is broken
Description: Items are misaligned
Steps to Reproduce:
Table cell height mismatch in FF. In Chrome and Safari the <div>
and the <table>
version look the same. In Firefox the second cell is bigger than the others.
In Firefox, cells that are on their own layer (transform
or position: relative
) appear to have the size of the cell itself plus the size of one border if the table has border-collapse: collapse
.
This was a real-world issue on the table on this site:
https://www.netcologne.de/geschaeftskunden/internet/business-internet/
There, I managed to fix it using an ugly hack so this is for reproducing it now.
View the screenshot
![Screenshot](https://camo.githubusercontent.com/db6575a4a9b55cb7059fc96f9cc4895fed344dfcae78adb8870084c0f5172ab8/68747470733a2f2f776562636f6d7061742e636f6d2f75706c6f6164732f323032302f332f62643865353261632d663332352d346663302d393436392d6631623639313839343032632e6a706567)
Browser Configuration
From webcompat.com with ❤️
URL: https://codepen.io/MoritzKn/pen/BaNqbee
Browser / Version: Firefox 74.0
Operating System: Mac OS X 10.15.3
Tested Another Browser: Yes Chrome
Problem type: Design is broken
Description: Items are misaligned
Steps to Reproduce:
Table cell height mismatch in FF. In Chrome and Safari the
<div>
and the<table>
version look the same. In Firefox the second cell is bigger than the others.In Firefox, cells that are on their own layer (
transform
orposition: relative
) appear to have the size of the cell itself plus the size of one border if the table hasborder-collapse: collapse
.This was a real-world issue on the table on this site:
https://www.netcologne.de/geschaeftskunden/internet/business-internet/
There, I managed to fix it using an ugly hack so this is for reproducing it now.
View the screenshot
Browser Configuration
From webcompat.com with ❤️