|
-
Nov 21st, 2005, 04:14 PM
#1
Thread Starter
Junior Member
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.
Last edited by sp007; Nov 21st, 2005 at 04:28 PM.
-
Nov 21st, 2005, 04:42 PM
#2
Fanatic Member
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
Last edited by kaihirst; Nov 21st, 2005 at 04:56 PM.
As the information I give is useful in its nature, consider using the RATE POST feature located on the bottom left of this post please..
A few things that make a good Developer a Great One.
 Methodical and a thorough approach to research and design inevitably leads to success.
Forward thinking is the key to Flow of control.
Never test in the design environment, always test in real time, you get the REAL results.
CBSE & OOSE are the same animal, they just require different techniques, and thinking.
SEO is a globe of objectives, SE rankings is an end to a means for these objectives, not part of them.
The key to good design is explicit attention to both detail and response.
Think Freely out of the "Box" you're in..... You will soar to better heights.
Kai Hirst - MSCE, MCDBA, MCSD, MCP, MCAP, MSCT
-
Nov 21st, 2005, 05:11 PM
#3
Thread Starter
Junior Member
Re: Table/Cell Height in IE
 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.
-
Nov 21st, 2005, 09:31 PM
#4
Fanatic Member
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
As the information I give is useful in its nature, consider using the RATE POST feature located on the bottom left of this post please..
A few things that make a good Developer a Great One.
Methodical and a thorough approach to research and design inevitably leads to success.
Forward thinking is the key to Flow of control.
Never test in the design environment, always test in real time, you get the REAL results.
CBSE & OOSE are the same animal, they just require different techniques, and thinking.
SEO is a globe of objectives, SE rankings is an end to a means for these objectives, not part of them.
The key to good design is explicit attention to both detail and response.
Think Freely out of the "Box" you're in..... You will soar to better heights.
Kai Hirst - MSCE, MCDBA, MCSD, MCP, MCAP, MSCT
-
Nov 22nd, 2005, 03:26 AM
#5
Fanatic Member
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.
What bug? That's not a bug. It's an undocumented feature!
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
|
Reply With Quote