arrow-down arrow at-sign bug check checkbox-checked checkbox-unchecked svg-checkmark chevron-right chevrons-right circle-down circle-left circle-right circle-up cloud2 svg-cross2 download download external-link filter github hash home leaf leaf left link-2 log-in log-out mail menu message-square minus plus radio-checked radio-checked2 radio-unchecked search settings spinner8 target twitter up upload-2 user users warning x zap
  • Home
  • Report a bug
  • Contribute
  • All issues
  • Login

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 screenshotScreenshot
Browser Configuration
  • None

From webcompat.com with ❤️

Please login to edit issues.

View issue on Github

Shortcut: Press l on your keyboard to open the label editor. Shortcut: Press g on your keyboard to be taken to the GitHub view of this page.
🔒 Closed: Duplicate
#50706

codepen.io - Items are misaligned

Opened: 2020-03-25
Reporter: MoritzKn
Comments: 5
  • Home
  • List of issues
  • About
  • Contribute
  • Contact
  • Privacy Policy
  • Terms of Service
  • Code of Conduct