Solved

height of nested tables in a rowspan construct IE vs. NS7

Posted on 2004-08-26
18
638 Views
Last Modified: 2008-03-03
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>
0
Comment
Question by:jastroem
  • 10
  • 8
18 Comments
 

Author Comment

by:jastroem
ID: 11900991
and here is a screenshot from NS 7.1

http://www.astroem.ch/CSS/nestedTablesNS7_1.gif
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11901306
>>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
 
LVL 31

Expert Comment

by:seanpowell
ID: 11901319
Here's an online example:
http://www.pdgmedia.com/ee/calendar.html
0
 

Author Comment

by:jastroem
ID: 11901638
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 11901727
I have a thought about those arrows - hold on a moment :-)
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11901942
What about something like this, setting position relative on the cells that have internal content / arrows:

http://www.pdgmedia.com/ee/calendar2.html
0
 

Author Comment

by:jastroem
ID: 11902363
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 11902543
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
 

Author Comment

by:jastroem
ID: 11902927
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 31

Expert Comment

by:seanpowell
ID: 11903024
>>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
 
LVL 31

Expert Comment

by:seanpowell
ID: 11903032
>>IE 6 looks okay unless I'm missing something...

Scratch that - I see the slight pixel displacement - but I can live with it :-)
0
 

Author Comment

by:jastroem
ID: 11903136
> 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
 

Author Comment

by:jastroem
ID: 11903202
>>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
 
LVL 31

Expert Comment

by:seanpowell
ID: 11903376
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
 

Author Comment

by:jastroem
ID: 11903615
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
 
LVL 31

Accepted Solution

by:
seanpowell earned 350 total points
ID: 11903808
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
 

Author Comment

by:jastroem
ID: 11904495
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 11904522
Thanks :-)

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

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now