Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Height of Empty Cells in IE

    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:
    Code:
    .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:
    Code:
    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

  • #2
    New Coder
    Join Date
    Mar 2008
    Posts
    88
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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/20...eset-reloaded/

    Good Luck!

  • #3
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    ya the css reset should help, IE7 is bad for adding padding for no reason.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #4
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #5
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    Try adding:

    Code:
    <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.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Cell spacing can be controlled with CSS’s border-spacing 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.

  • #7
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •