Is it IE7 or is it me?

[michaellunsford]

FF renders this fine, but IE7 doesn't.

 

http://www.kishakana.com/featured.html

 

The header is supposed to have a border around it (IE7 doesn't display it), and it's supposed to be exactly 153px high (IE7 makes the height "auto" regardless). I'm using a table because I want everything to be 100% high, and I can't get DIV to respond to 100% minus 153px.

 

Any thoughts?

[michaellunsford]

Looks like it's IE -- not just 7.

 

any ideas how to get the top to only be 153px high, without windows sizing it up?

 

Basically,

<table style="height:100%">
<tr><td style="height:153px; background:url(/images/test.jpg) no-repeat;" colspan="2"></td></tr>
<tr><td>Menu goes here</td><td>main body goes here</td></tr>
<tr><td style="height:15px;" colspan="2"></td></tr>
</table>

 

the problem, the top portion is more than 153px high in IE6 & 7. See below - that dark brown vertical menu is supposed to be snuggled up to the header image (as is the main content area). But, it's inventing an extra 60px or so of white space.

 

 

[mainewoods]

There's something called the ie box model problem.  Basically it goes like this.  If you specify a width or height for ie, ie counts that width as encompassing the contents area + the padding + the borders(if any).  ff instead only counts the contents area for the width.  ie7 was supposed to be using the same model as ff now unless it goes into quirks mode in which case it reverts to the old model.

 

The fix for this is to use paddings and borders of zero and explicitly set them because if you don't ie will use a default padding of 2 and ff will use 0.  Set them to zero on both the table level and the td level as well.

 

Just noticed that you have the height set to 2 different values on 2 td in the same row, the first td and the last.

 

take the height:100% out of the table tag, it may be creating extra space.

[michaellunsford]

Thanks for the reply. I checked everything over and I think I'm in complete compliance with your comments already.

 

The reason I'm using a table is to make the content are 100% high. Removing the 100% height would defeat that purpose.

 

The heading row contains a single " " tag (because IE wouldn't put a border without some content). The image is a background CSS image, which shouldn't be counting against any height or width measurements. The border is specified as 3px on top and bottom, but there is no margin.

 

Regarding the two td's with different heights -- I've checked my CSS and html but don't see what you're referring to. The table height is 100%, the heading has a static 153px height, and the second row has two cells without any height specified. The goal being to make the top 153px high, and the bottom auto-stretch to fill in whatever's left over.