Results 1 to 5 of 5

Thread: Table/Cell Height in IE

Threaded View

  1. Nov 21st, 2005, 04:14 PM #1
    sp007
    sp007 is offline

    Thread Starter
    Junior Member
    Join Date
    Mar 2000
    Location
    Davis, CA
    Posts
    23

    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">&nbsp;</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.
    Last edited by sp007; Nov 21st, 2005 at 04:28 PM.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Posting Permissions

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

Forum Rules


Click Here to Expand Forum to Full Width