Currently investigating why there is additional space being added by IE. The only fixed data is the width of the image (171 px).
Using Jquery, I checked the height of the div in Firefox, Chrome, and Opera which came out to 164px, but in IE 7 it's 172!
Firefox:
Chrome:
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 );
});
What is causing this discrepancy with IE? Why does it seem to have a vendetta against me?