Search code examples
htmlcssinternet-exploreralignment

IE 7 adding extra height on table

I'm trying to find why IE adds extra space. This is a temporary image, the only static data is the image width (171 px).

With Jquery I alerted the div height, in Firefox, Chrome and Opera, the div height has 164px, but on IE 7 it has 172 !

Firefox:

Firefox

Chrome:

Chrome

IE 7:

IE 7

HTML:

<div class='wide-box'>
            <table border="0" cellspacing="0" cellpadding="0" width="171">
                <tr><td height="7"><img src="images/wide-box-header.png" width="100%" alt='' /></td></tr>
                <tr><td class='y-repeat'><img src="images/temp/3.png" alt=''/></td></tr>
                <tr><td height="9"><img src="images/wide-box-footer.png" width="100%" alt='' /></td></tr>
                <tr><td class='shadow'></td></tr>
            </table>
        </div><!-- WIDE BOX -->

CSS:

.wide-box{
    display:block;
    width:171px;
    float:right;
    margin-right:10px;
}

.wide-box .y-repeat img { display:block;margin:0 auto; }
.wide-box .y-repeat { background:url(images/wide-box-y-repeat.png) top left repeat-y; }
.wide-box .shadow { height:10px;background:url(images/wide-box-shadow.png) top center no-repeat; }

Jquery:

$(window).load(function(){
    $(".wide-box table").height( $(".wide-box .y-repeat img").height() + 24 );
});

Why IE hates me?

Solution

  • I am actually seeing the spacing in Chrome and IE9. Without seeing a full example I cannot be sure, but adding

    td img {
    display:block;
}

    removed the spacing between the rows in my local testing.