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.