Table/Cell Height in IE

I'm having issues with table rendering in ie. I'm using height: 100%'s to try and get an inner table to span the entire height of a parent cell. It works fine in firefox, but ie is not cooperating at all. In ie, the height is basically zero, it just wraps around the text. Anyone know what's missing? I really don't want to have to use pixel heights.

PHP Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...... <table cellpadding="0" cellspacing="0" class="calendarborder"> <tr style="height: 100%"> <td style="height: 100%"> <table width="100%" style="height: 100%" cellpadding="0" border="0" cellspacing="1"> <tr> <td style="height: 100%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> <td class="calendardays"> </td> <td colspan="1" width="80" class="calendardays present">M</td> <td colspan="1" width="80" class="calendardays future">T</td> <td colspan="1" width="80" class="calendardays future">W</td> <td colspan="1" width="80" class="calendardays future">R</td> <td colspan="1" width="80" class="calendardays future">F</td> </tr> <tr style="height: 100%"> <td style="height: 50%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> <td style="height: 33px" rowspan="2" class="calendarhours">9a</td> <td valign="top" colspan="1" rowspan="18" height="100%"> <table width="100%" border="1" cellspacing="0" cellpadding="0" style="height: 100%"> <tr> <td class="customevent1" style="height: 100%"> <span class="eventtitle"> <a class="inherit" onclick="viewevent(47)" style="cursor: pointer"> Work</a></span><br /> <span class="eventtime">09:00 - 6:00</span></td> </tr> </table> </td> <td valign="top" colspan="1" rowspan="18" style="height: 100%"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%"> <tr> <td class="customevent1" style="height: 100%"> <span class="eventtitle"> <a class="inherit" onclick="viewevent(47)" style="cursor: pointer"> Work</a></span><br /> <span class="eventtime">09:00 - 6:00</span></td> </tr> </table> </td> <td valign="top" colspan="1" rowspan="18" style="height: 100%"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%"> <tr> <td class="customevent1" style="height: 100%"> <span class="eventtitle"> <a class="inherit" onclick="viewevent(47)" style="cursor: pointer"> Work</a></span><br /> <span class="eventtime">09:00 - 6:00</span></td> </tr> </table> </td> <td valign="top" colspan="1" rowspan="18" style="height: 100%"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%"> <tr> <td class="customevent1" style="height: 100%"> <span class="eventtitle"> <a class="inherit" onclick="viewevent(47)" style="cursor: pointer"> Work</a></span><br /> <span class="eventtime">09:00 - 6:00</span></td> </tr> </table> </td> <td valign="top" colspan="1" rowspan="18" style="height: 100%"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%"> <tr> <td class="customevent1" style="height: 100%"> <span class="eventtitle"> <a class="inherit" onclick="viewevent(47)" style="cursor: pointer"> Work</a></span><br /> <span class="eventtime">09:00 - 6:00</span></td> </tr> </table> </td> </tr> <tr style="height: 33px"> <td style="height: 50%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> </tr> <tr style="height: 33px"> <td style="height: 50%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> <td style="height: 100%" rowspan="2" class="calendarhours">10a</td> </tr> <tr style="height: 33px"> <td style="height: 50%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> </tr> <tr style="height: 33px"> <td style="height: 50%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> <td style="height: 100%" rowspan="2" class="calendarhours">11a</td> </tr> <tr style="height: 33px"> <td style="height: 50%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> </tr> <tr style="height: 33px"> <td style="height: 50%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> <td style="height: 100%" rowspan="2" class="calendarhours">12p</td> </tr> <tr style="height: 33px"> <td style="height: 50%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> </tr> <tr style="height: 33px"> <td style="height: 50%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> <td style="height: 100%" rowspan="2" class="calendarhours">1p</td> </tr> <tr style="height: 33px"> <td style="height: 50%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> </tr> <tr style="height: 33px"> <td style="height: 50%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> <td style="height: 100%" rowspan="2" class="calendarhours">2p</td> </tr> <tr style="height: 33px"> <td style="height: 50%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> </tr> <tr style="height: 33px"> <td style="height: 50%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> <td style="height: 100%" rowspan="2" class="calendarhours">3p</td> </tr> <tr style="height: 33px"> <td style="height: 50%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> </tr> <tr style="height: 33px"> <td style="height: 50%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> <td style="height: 100%" rowspan="2" class="calendarhours">4p</td> </tr> <tr style="height: 33px"> <td style="height: 50%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> </tr> <tr style="height: 33px"> <td style="height: 50%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> <td style="height: 100%" rowspan="2" class="calendarhours">5p</td> </tr> <tr style="height: 33px"> <td style="height: 50%; width: 0px; border: 0px;" rowspan="1"> <img alt="image" src="images/blank.png" width="1" height="1" /></td> </tr> </tr> </table> </td> </tr> </table>

.

Note: the css classes are pretty much just for colors and fonts, they don't have an effect on my rendering issue.

Re: Table/Cell Height in IE

Have you tried overriding the DOM defaults using CSS rather than standard classes?

E.G.
VB Code:
.classname {
height: 100%;
width: 50%;
etc
}
or have yoiu tried the nowrap tag??

Kai

Re: Table/Cell Height in IE

Quote:
Originally Posted by kaihirst
Have you tried overriding the DOM defaults using CSS rather than standard classes?

E.G.
VB Code:
.classname {
height: 100%;
width: 50%;
etc
}
Kai
I switched everything over to css classes rather than the inline style tags, but it had no effect. It still renders the same as before in both browsers.

To see my issue more clearly, go to http://www.siscast.com/print.php?color&classes=88798. It renders properly in firefox. Incorrectly in ie and opera. It passes the w3c validator, but the fact that it only works in 1 of 3 browsers leads me to believe there is a problem in the code.

Re: Table/Cell Height in IE

Hi,

SP007

ITS NOT YOUR CODE!!!!!!!

do be thinking this at all my man. its the actuam DOm's for IE and opera, they wrok radically different than the firefox DOm and require a little treatment with kid gloves.

It doe slook liek your e gonna have to use pixels, padding and margins on this one pal, unless the following works...

reaplce the . [dot] in the class with a # [hash] for a virtual absolute override. if this dont work, pixels it is..

sorry

Kai

Re: Table/Cell Height in IE

Has the page you linked to been changed? The only difference I see between Firefox and IE is the margins being slightly different....perhaps your IE is confused?

Try this, just for kicks. Open up internet options and go through every tab and restore default settings and try it again. IE has a tendancy to, I think, trash a setting somewhere (probably something in one of those outdated ini files) which causes rendering problems with some pages.