View Full Version : Height of Empty Cells in IE

May 16th, 2009, 02:27 PM
my problem is as follows - when I have a cell with a specified height and a border, its height is different when it has text in it and when it doesn't (happend in IE7, didn't in FF).

Example - I had the following css & HTML:

border-collapse: collapse;
.mainTable td
border: 1px solid black;
height: 30px;

<table class="mainTable">
<td id="td01">xxx</td>
<td id="td02"></td>

And added the following javascript:

var td01 = document.getElementById("td01");
var td02 = document.getElementById("td02");
td01.innerHTML = "This cell had text in it, and its height was " + td01.clientHeight + "px";
td02.innerHTML = "This cell did not have text in it, and its height was " + td02.clientHeight + "px";

When testing in IE, the texts were:
This cell had text in it, and its height was 32px
This cell did not have text in it, and its height was 28px
(when removing the border - 32 and 30)

While in FF they were:
This cell had text in it, and its height was 29px
This cell did not have text in it, and its height was 29px
(when removing the border - 30 and 30)

What is the reason for this difference in IE? And how can I get the cells to have the same height regardless of whether they contain text or not?


May 16th, 2009, 07:56 PM
Have you tried a css reset?
Basically setting all margins and padding to zero

padding: 0;

A more detailed version here:


Good Luck!

May 16th, 2009, 07:58 PM
ya the css reset should help, IE7 is bad for adding padding for no reason.

May 17th, 2009, 09:15 AM
Thanks for the answer.
That did help when I removed the border (height was 30px in both cells), but when it's there (and I might need it), there is still a two pixels difference (30 and 28, while FF has 29 for both).
Is there anything else that can be done about it?

May 18th, 2009, 11:03 PM
Try adding:

<table class="mainTable" cellspacing="0">

I'm pretty sure this is the only attribute not able to be controlled through CSS and may be the reason you are seeing the extra space.

May 19th, 2009, 12:55 AM
Cell spacing can be controlled with CSS’s border-spacing (http://www.w3schools.com/css/pr_tab_border-spacing.asp) property (except in IE – of course). But still, since this only works with separate borders, if you want no space you can apply border-collapse: collapse; to the table and the space will be gone (even in IE). All without specifying a cellspacing in HTML.

May 19th, 2009, 03:50 PM
VIPStephan is right, and therefore, since I already used border-collapse: collapse;, using cellspacing doesn't make a difference.

So is it possible that, other than removing the border, there is no solution to this problem?