jastroem
asked on
height of nested tables in a rowspan construct IE vs. NS7
Hi
In a complex table construct (it's a dynamically generated calendar) i'm using differrent rowspans to display overlapping events in a daily view.
each "eventBox" is filled with a table that i stretch to 100% height by adding:
- 100% height to the rowspanned TD where the table is nested
- 100% heigth to the nested table
- 100% height to the content TD in the nested table
this works just great for IE on PC and mac.
on safari it's only to forget about having the tables stretched, but i really thought that it should work on NS 7.1...
what i get on NS is a very strange display where one (and sometimes two) of the nested tables stretches up to the 100% height, the rest of the nested tables just stays in the height they get from the content.
it could be solved by adding a pixel height to the nested table - unconvienient since i the need to dynamically calctulate the each tables heigt based on the actual rowspan...
and...
i must put the content in a nested table because of the complexity like:
category colored vertical bars, arrows pointing up or/and down
the page looks just perfect in IE:
http://www.astroem.ch/CSS/nestedTables.gif
is there a solution to make the tables streching properly to 100% on Netscape?
/ joergen
--------------------------
some code fragment to test with
not viewable in this demo is a left column
where the time grid 15, 30 or 60 minutes
is placed
--------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="500" border="1" cellspacing="2" cellpadding="2">
<tr>
<td height="100%" rowspan="4"><table width="100%" height="100%" border="1" cellpadding="2" cellspacing="2">
<tr>
<td height="100%"> i am a table with 100% height in a td with 100% height. </td>
</tr>
</table></td>
<td> </td>
<td nowrap>Some text </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="100%" rowspan="5">
<table width="100%" height="100%" border="1" cellpadding="2" cellspacing="2">
<tr>
<td height="100%">i am a table with 100% height in a td with 100% height.</td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="100%" rowspan="4"><table width="100%" height="100%" border="1" cellpadding="2" cellspacing="2">
<tr>
<td height="100%">i am a table with 100% height in a td with 100% height.</td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
In a complex table construct (it's a dynamically generated calendar) i'm using differrent rowspans to display overlapping events in a daily view.
each "eventBox" is filled with a table that i stretch to 100% height by adding:
- 100% height to the rowspanned TD where the table is nested
- 100% heigth to the nested table
- 100% height to the content TD in the nested table
this works just great for IE on PC and mac.
on safari it's only to forget about having the tables stretched, but i really thought that it should work on NS 7.1...
what i get on NS is a very strange display where one (and sometimes two) of the nested tables stretches up to the 100% height, the rest of the nested tables just stays in the height they get from the content.
it could be solved by adding a pixel height to the nested table - unconvienient since i the need to dynamically calctulate the each tables heigt based on the actual rowspan...
and...
i must put the content in a nested table because of the complexity like:
category colored vertical bars, arrows pointing up or/and down
the page looks just perfect in IE:
http://www.astroem.ch/CSS/nestedTables.gif
is there a solution to make the tables streching properly to 100% on Netscape?
/ joergen
--------------------------
some code fragment to test with
not viewable in this demo is a left column
where the time grid 15, 30 or 60 minutes
is placed
--------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="500" border="1" cellspacing="2" cellpadding="2">
<tr>
<td height="100%" rowspan="4"><table width="100%" height="100%" border="1" cellpadding="2" cellspacing="2">
<tr>
<td height="100%"> i am a table with 100% height in a td with 100% height. </td>
</tr>
</table></td>
<td> </td>
<td nowrap>Some text </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="100%" rowspan="5">
<table width="100%" height="100%" border="1" cellpadding="2" cellspacing="2">
<tr>
<td height="100%">i am a table with 100% height in a td with 100% height.</td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="100%" rowspan="4"><table width="100%" height="100%" border="1" cellpadding="2" cellspacing="2">
<tr>
<td height="100%">i am a table with 100% height in a td with 100% height.</td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
>>is there a solution to make the tables streching properly to 100% on Netscape?
Well, the problem is that NS is actually getting it right, as we can't assign heights that way as per the spec. If you add a doctype to the page to put IE into standards-mode, you'll see that it now looks just like the NS page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
However, looking at your screenshot, I don't see any need to have the table expand to 100% height - we just need to make it "look" like it does, which is an entirely different thing. We just add the border to the containing cell, instead of the contained table.
Below is an example that you can load up to demonstrate - I've arbitrarily set values on the CSS just for display purposes, as it would be impossible for me to recreate the existing CSS you're using. But you'll get the idea :-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table#main
{
width:500px;
}
table
{
table-layout:fixed;
width:100%;
border-collapse:separate;
}
td
{
padding:2px;
border:1px solid #999;
}
td.inset
{
border:2px solid #A6A187;
vertical-align:top;
}
.grey
{
background-color:#cccccc;
}
table.nostyle td
{
border:none;
}
</style>
</head>
<body>
<table id="main" cellspacing="2">
<tr>
<td rowspan="4" class="inset">
<table class="nostyle">
<tr>
<td>i am a table.</td>
</tr>
</table></td>
<td> </td>
<td>Some text</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="5" class="inset grey">
<table class="nostyle">
<tr>
<td>i am a table.</td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="4" class="inset">
<table class="nostyle">
<tr>
<td>i am table.</td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
What do you think, is that workable for you?
Thanks,
Sean
Well, the problem is that NS is actually getting it right, as we can't assign heights that way as per the spec. If you add a doctype to the page to put IE into standards-mode, you'll see that it now looks just like the NS page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
However, looking at your screenshot, I don't see any need to have the table expand to 100% height - we just need to make it "look" like it does, which is an entirely different thing. We just add the border to the containing cell, instead of the contained table.
Below is an example that you can load up to demonstrate - I've arbitrarily set values on the CSS just for display purposes, as it would be impossible for me to recreate the existing CSS you're using. But you'll get the idea :-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table#main
{
width:500px;
}
table
{
table-layout:fixed;
width:100%;
border-collapse:separate;
}
td
{
padding:2px;
border:1px solid #999;
}
td.inset
{
border:2px solid #A6A187;
vertical-align:top;
}
.grey
{
background-color:#cccccc;
}
table.nostyle td
{
border:none;
}
</style>
</head>
<body>
<table id="main" cellspacing="2">
<tr>
<td rowspan="4" class="inset">
<table class="nostyle">
<tr>
<td>i am a table.</td>
</tr>
</table></td>
<td> </td>
<td>Some text</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="5" class="inset grey">
<table class="nostyle">
<tr>
<td>i am a table.</td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="4" class="inset">
<table class="nostyle">
<tr>
<td>i am table.</td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
What do you think, is that workable for you?
Thanks,
Sean
Here's an online example:
http://www.pdgmedia.com/ee/calendar.html
http://www.pdgmedia.com/ee/calendar.html
ASKER
dear sean
thanks a lot for your speedy reply!
i did the "loose.dtd test" - and you're right...
> However, looking at your screenshot, I don't see any need to have the table expand to 100% height - we just need > to make it "look" like it does, which is an entirely different thing. We just add the border to the containing cell,
> instead of the contained table
yes - at the first glance it looks as if i do not need to have the table expanding, i could even skip the table a put the content directly in the rowspanned td, dynamically color the left border set to some 7px width, and it would work fine. actually, i had it that way in a previous state during the development of the application.
now the calendar have the (smart?) feature that indicates event started - let's say - 20:00 on day one and ends at 02:00 on day two. this is done by dynamically adding a arrow pointing up or down in the colored td on the left hand of the event text.
i achieve this by having my expanded table like this:
==========================
<table height="100%>
<tr>
<!-- left side holding arrows -->
<td height="100%">
<table height=""100% bgcolor="categoryColor">
<tr><td height="100%" valign="top">topArrowIfNee
<tr><td>bottomArrowIfNeede
</table>
</td>
<!-- right side holding event text-->
<td width="100%">some content</td>
</tr>
</table>
==========================
This new screen shot points out that better:
http://www.astroem.ch/CSS/nestedTables2.gif
an alternative could be to positioning the arrows somewhere else in the "eventBox", however, they should be positioned relevant to what they are supposed to mean: on top or/and on bottom.
<!-- in the meantime, i can see another comment has been posted... this was written before reading that -->
kind regards / jörgen
thanks a lot for your speedy reply!
i did the "loose.dtd test" - and you're right...
> However, looking at your screenshot, I don't see any need to have the table expand to 100% height - we just need > to make it "look" like it does, which is an entirely different thing. We just add the border to the containing cell,
> instead of the contained table
yes - at the first glance it looks as if i do not need to have the table expanding, i could even skip the table a put the content directly in the rowspanned td, dynamically color the left border set to some 7px width, and it would work fine. actually, i had it that way in a previous state during the development of the application.
now the calendar have the (smart?) feature that indicates event started - let's say - 20:00 on day one and ends at 02:00 on day two. this is done by dynamically adding a arrow pointing up or down in the colored td on the left hand of the event text.
i achieve this by having my expanded table like this:
==========================
<table height="100%>
<tr>
<!-- left side holding arrows -->
<td height="100%">
<table height=""100% bgcolor="categoryColor">
<tr><td height="100%" valign="top">topArrowIfNee
<tr><td>bottomArrowIfNeede
</table>
</td>
<!-- right side holding event text-->
<td width="100%">some content</td>
</tr>
</table>
==========================
This new screen shot points out that better:
http://www.astroem.ch/CSS/nestedTables2.gif
an alternative could be to positioning the arrows somewhere else in the "eventBox", however, they should be positioned relevant to what they are supposed to mean: on top or/and on bottom.
<!-- in the meantime, i can see another comment has been posted... this was written before reading that -->
kind regards / jörgen
I have a thought about those arrows - hold on a moment :-)
What about something like this, setting position relative on the cells that have internal content / arrows:
http://www.pdgmedia.com/ee/calendar2.html
http://www.pdgmedia.com/ee/calendar2.html
ASKER
hi again sean
wow - it looks really cool - but unfortunately only really "true" on IE/PC :-(
Screenshots from PC & Mac with a couple of browsers
http://www.astroem.ch/CSS/nestedTables_seanPowell1.gif
The most terrible ones are Safari and IE on Mac.
I could even live with the stupid rendering on Safari & IE i.e. work around that and leave out the arrows there... but Netscape/Mozilla/NS is really a must...
thank you so much for your very much appreciated work!
kind regards / jörgen
wow - it looks really cool - but unfortunately only really "true" on IE/PC :-(
Screenshots from PC & Mac with a couple of browsers
http://www.astroem.ch/CSS/nestedTables_seanPowell1.gif
The most terrible ones are Safari and IE on Mac.
I could even live with the stupid rendering on Safari & IE i.e. work around that and leave out the arrows there... but Netscape/Mozilla/NS is really a must...
thank you so much for your very much appreciated work!
kind regards / jörgen
Yikes - that's embarassing.
(slightly modified down arrow image)
http://www.pdgmedia.com/ee/calendar2.html
Note - I don't use a MAC unfortunately, you'll have to let me know...
(slightly modified down arrow image)
http://www.pdgmedia.com/ee/calendar2.html
Note - I don't use a MAC unfortunately, you'll have to let me know...
ASKER
sean
you're fast...
and would say not only "slightly modified down arrow image"? it works almost perfect on all plattforms! even safari can render it proper :-)
http://www.astroem.ch/CSS/nestedTables_seanPowell2.gif
small problems with IE 6 / PC and a little bit worse on IE 5.2 mac.
will it be possible to add the arrow as in test1 but on bottom left?
best regards / joergen
--------------------------
> I don't use a MAC unfortunately, you'll have to let me know...
well... most of the time i wish i didn't - we have an iMac here just
to test - and as almost always, it ends up with anger...
you're fast...
and would say not only "slightly modified down arrow image"? it works almost perfect on all plattforms! even safari can render it proper :-)
http://www.astroem.ch/CSS/nestedTables_seanPowell2.gif
small problems with IE 6 / PC and a little bit worse on IE 5.2 mac.
will it be possible to add the arrow as in test1 but on bottom left?
best regards / joergen
--------------------------
> I don't use a MAC unfortunately, you'll have to let me know...
well... most of the time i wish i didn't - we have an iMac here just
to test - and as almost always, it ends up with anger...
>>small problems with IE 6 / PC and a little bit worse on IE 5.2 mac.
IE 6 looks okay unless I'm missing something...
I wonder if IE 5.2 mac is displaying the cached version of the arrow ?
>>will it be possible to add the arrow as in test1 but on bottom left?
Is that "but" on bottom left or do you mean "and" on bottom left - just want to make sure...
IE 6 looks okay unless I'm missing something...
I wonder if IE 5.2 mac is displaying the cached version of the arrow ?
>>will it be possible to add the arrow as in test1 but on bottom left?
Is that "but" on bottom left or do you mean "and" on bottom left - just want to make sure...
>>IE 6 looks okay unless I'm missing something...
Scratch that - I see the slight pixel displacement - but I can live with it :-)
Scratch that - I see the slight pixel displacement - but I can live with it :-)
ASKER
> I see the slight pixel displacement - but I can live with it :-)
I too!
> Is that "but" on bottom left or do you mean "and" on bottom left - just want to make sure...
It was ment as "and" - all arrows can appear as:
- top
- bottom
- top & bottom (even if that's a very rare situation)
I like the leftStyle most - but also the one(s) placed on the right side are fine!
Later - hopefully today or this evening - I will try implement your code in the cfml-routine that generates the calendar!
thx a lot / joergen
I too!
> Is that "but" on bottom left or do you mean "and" on bottom left - just want to make sure...
It was ment as "and" - all arrows can appear as:
- top
- bottom
- top & bottom (even if that's a very rare situation)
I like the leftStyle most - but also the one(s) placed on the right side are fine!
Later - hopefully today or this evening - I will try implement your code in the cfml-routine that generates the calendar!
thx a lot / joergen
ASKER
>>I wonder if IE 5.2 mac is displaying the cached version of the arrow ?
no - the cache was empty - and I did checked that up again. it's not really important, I think (or hope) that mac users will use the NS or Safari. As far as i'm informed, there won't be any future developing of IE for mac.
/ joergen
no - the cache was empty - and I did checked that up again. it's not really important, I think (or hope) that mac users will use the NS or Safari. As far as i'm informed, there won't be any future developing of IE for mac.
/ joergen
Let's try and simplify things a bit for the left-hand arrows:
http://www.pdgmedia.com/ee/calendar3.html
>>won't be any future developing of IE for mac
Absolutely - and aymen to that.
http://www.pdgmedia.com/ee/calendar3.html
>>won't be any future developing of IE for mac
Absolutely - and aymen to that.
ASKER
that's perfect - and it's exactly what i wanted!
on IE5.2 mac the top arrow doesn't appear - but - as said before -i can live with that!
http://www.astroem.ch/CSS/IE5_mac.gif
in all other tested browsers/plattforms just perfect.
may I ask <b>you</b> to publish the code from calendar 2 & calendar 3 so i can grade your answer, and let others take part of your interesting solution?
/ joergen
on IE5.2 mac the top arrow doesn't appear - but - as said before -i can live with that!
http://www.astroem.ch/CSS/IE5_mac.gif
in all other tested browsers/plattforms just perfect.
may I ask <b>you</b> to publish the code from calendar 2 & calendar 3 so i can grade your answer, and let others take part of your interesting solution?
/ joergen
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
dear seanPowell
this was really beyond my expectations - fast, professional and friendly!
i grade your answer wiith a <span style="font:bold 72px Verdana;">A</span>
best wishes
joergen
this was really beyond my expectations - fast, professional and friendly!
i grade your answer wiith a <span style="font:bold 72px Verdana;">A</span>
best wishes
joergen
Thanks :-)
If it weren't for deprecated html tags, I'd be <blink>blushing</blink>.
If it weren't for deprecated html tags, I'd be <blink>blushing</blink>.
ASKER
http://www.astroem.ch/CSS/nestedTablesNS7_1.gif