...

View Full Version : Height of Empty Cells in IE



AmitB
05-16-2009, 01:27 PM
Hi,
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:


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

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

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?

Thanks,
Amit

beedie
05-16-2009, 06:56 PM
Have you tried a css reset?
Basically setting all margins and padding to zero

*{
margin:0;
padding: 0;
}

A more detailed version here:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Good Luck!

PitbullMean
05-16-2009, 06:58 PM
ya the css reset should help, IE7 is bad for adding padding for no reason.

AmitB
05-17-2009, 08: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?

sobrien79
05-18-2009, 10: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.

VIPStephan
05-18-2009, 11:55 PM
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.

AmitB
05-19-2009, 02: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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum