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
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 (
transformorposition: 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 ❤️