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>&nbsp;</td>
    <td nowrap>Some text </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
jastroemAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
seanpowellConnect With a Mentor Commented:
Of course :-)

Calendar2.html:

<!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">

body
{
      font:11px verdana, sans-serif;
}

table#main
{
      margin-top:100px;
      margin-left:100px;
      width:500px;
      table-layout:fixed;
      border-collapse:separate;
}

td
{
      padding:2px 2px 2px 6px;
      border:1px solid #999;
      vertical-align:top;
}

.topa
{
      background: url(down_ra.gif) no-repeat bottom right;
}

.blue
{
      border:1px solid #A6A187;
      border-left:7px solid #3399FF;
}

.yellow
{
      border:1px solid #A6A187;
      border-left:7px solid #FFCC00;
}

.purple
{
      border:1px solid #A6A187;
      border-left:7px solid #9933FF;
}


/* ARROWS */

.img1
{
      position:relative;
      top:-7px;
      left:-13px;
      z-index:100;
}

.up
{
      position:absolute;
      top:4px;
      right:4px;
      z-index:100;
}

.down
{
      position:absolute;
      bottom:4px;
      right:4px;
      z-index:100;
}

</style>
</head>

<body>
<table id="main" cellspacing="2">
  <tr>
    <td rowspan="4" class="lefta blue"><img src="top_ba.gif" class="img1">
    Test 1<br />
    03:00 - 0:500</td>
    <td>&nbsp;</td>
    <td>Some text</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="4" class="topa yellow"><div style="position:relative;">
    Test 2<br />
    03:00 - 0:500
    <img class="up" src="up_ra.gif">
    </div></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="4" class="purple">
    Test 3<br />
    03:00 - 0:500</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>



Calendar3.html

<!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">

body
{
      font:11px verdana, sans-serif;
}

table#main
{
      margin-top:100px;
      margin-left:100px;
      width:300px;
      table-layout:fixed;
      border-collapse:separate;
}

td
{
      padding:2px 2px 12px 20px;
      vertical-align:top;
}

.lefta
{
      background: url(bot_arrow.gif) no-repeat left bottom;
}


.blue
{
      border:1px solid #A6A187;
}

/* ARROWS */

.imgup
{
      position:relative;
      top:-2px;
      left:-20px;
      display:block;
}

</style>
</head>

<body>
<table id="main" cellspacing="2">
      <tr>
            <td rowspan="4" class="lefta blue">
            <img src="top_ba.gif" class="imgup">
            Test 1<br />
            03:00 - 0:500<br />
            Don't miss this event!</td>
      </tr>
</table>
</body>
</html>



I think IE5 MAC is reacting to the positioning. We can write CSS just for that browser, but without a MAC, it's hard to know what exactly... The format is basically this, for what it's worth:

/* commented backslash hack v2 \*/
#isnotMacIE5 { style rules }
#isMacIE5 { style rules }
/* end hack */
0
 
jastroemAuthor Commented:
and here is a screenshot from NS 7.1

http://www.astroem.ch/CSS/nestedTablesNS7_1.gif
0
 
seanpowellCommented:
>>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>&nbsp;</td>
    <td>Some text</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="5" class="inset grey">
    <table class="nostyle">
      <tr>
        <td>i am a table.</td>
      </tr>
    </table></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="4" class="inset">
    <table class="nostyle">
      <tr>
        <td>i am table.</td>
      </tr>
    </table></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

What do you think, is that workable for you?

Thanks,
Sean
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
seanpowellCommented:
Here's an online example:
http://www.pdgmedia.com/ee/calendar.html
0
 
jastroemAuthor Commented:
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">topArrowIfNeededElseBlindPix.gif</td></tr>
        <tr><td>bottomArrowIfNeededElseBlindPix.gif</td></tr>
     </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

0
 
seanpowellCommented:
I have a thought about those arrows - hold on a moment :-)
0
 
seanpowellCommented:
What about something like this, setting position relative on the cells that have internal content / arrows:

http://www.pdgmedia.com/ee/calendar2.html
0
 
jastroemAuthor Commented:
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
0
 
seanpowellCommented:
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...
0
 
jastroemAuthor Commented:
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...

0
 
seanpowellCommented:
>>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...
0
 
seanpowellCommented:
>>IE 6 looks okay unless I'm missing something...

Scratch that - I see the slight pixel displacement - but I can live with it :-)
0
 
jastroemAuthor Commented:
> 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

0
 
jastroemAuthor Commented:
>>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
0
 
seanpowellCommented:
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.
0
 
jastroemAuthor Commented:
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


0
 
jastroemAuthor Commented:
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

0
 
seanpowellCommented:
Thanks :-)

If it weren't for deprecated html tags, I'd be <blink>blushing</blink>.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.