CSS Table Display Differences - Chrome Vs Firefox

Question

I recently noticed that my site is broken in Chrome despite displaying well in Firefox. Having studied the HTML and CSS at my page -

http://www.designlagoon.com/what-we-do/

There is a larger gap below the 4 blue titles in Chrome than in Firefox - which is breaking the frame of the containing box. This seems to be related to padding / margin of the table layout I'm using but I'm struggling to work out a fix.

If anyone can shed some light on what might be causing the problem I'd really appreciate it!

Answer 1

This is related to a question I posted yesterday: Firefox: wrong interpretation of box model?

Actually, it's Chrome that's behaving correctly: td with height 150px + padding 15px (x2) = 180px.

Firefox does a miscalculation when adding padding to td.

So your best shot would be to remove the padding on the cells, and add a margin to their contents instead.

Answer 2

Thanks for the advice. I tried removing padding from the table and td and applying it to the paragraph instead. This improved the problem to an extent but we were still left with different borders in firefox, IE and chrome.

In the end we decided to remove the table completely and use 4 floated 25% columns instead. I will avoid using tables for any site layout in future. Lesson learned!