Question

I have a table and I need that every cell have the same fixed height and width.

So I have:

th, td {
    min-width: 110px;
    width: 110px;
    max-width: 110px;
    min-height: 60px;
    height: 60px;
    max-height: 60px;
}

a td is just:

<td><span>*number*</span></td>

I was testing my code on Firefox 7 and I saw they OK but in Chrome/IE9 the cells are taller.

So:

With or without min-max height, the heights are:

FF7: 56px/60px (without borders / with borders)
Chrome: 62px/66px
IE9: 61px/65px

The problem is that I made a background for the TD on Photoshop and it’s look weird if the size is not the right one and I don’t know how to resolve it.

Outside this problem, chrome is acting weird. I Apply via Javascript some a to some td’s once the page is loaded and they don’t work on chrome… until you refresh sometimes.

EDIT: The table have fixed height and some border-spacing too.

EDIT 2: I made a jsFiddle: http://jsfiddle.net/cFTpp/1/ The difference is less (58vs60) but is still different.

Answer 1

I ended changing the table for divs, more easy to archieve some results.