how do i show/hide a div within a table cell properly?

11-14-2006

hi...

i'm trying to sort out a problem with a table containing multiple
entries and one div-overlay for each entry (let's call it entry-
details), and i just can't get it to work properly:

in one version i tried, the div that i'm showing/hiding scales the
whole table up and down because it thinks it's part of the regular text.
that i definately don't want!

the second version i tried looks fine somehow, but the z-index seems
to be completely disrespected and then the text seems to be flowing
out of the containing cell if it becomes too long...

what the hell am i doing wrong??? it seems like such a simple problem,
but every idea i come up brings in new problems.

any help is deeply appreciated (see testcase below).

---------------------html starts here---------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script language="JavaScript" type="text/JavaScript">

</script>
</head>

<body>
<table width=100% border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="13"> </td>
<td align="left">
<table width="96%" border="0" cellspacing="0">

<tr>
<td bgcolor=#cc7777> </td>
<td bgcolor=#cc7777> </td>
</tr>



<tr align=right onMouseOver="toggleDiv('shows_1','1');"
onMouseOut="toggleDiv('shows_1','0');">
<td width="500" align=left bgcolor=#cccccc><strong>mouseover
here to open details</strong></td>
<td class=bar_l2_small valign=top> </td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500;">
<div align=right style="z-index:1; width:350;
position:absolute; right:0; border:1px;">
this is basically the 'look' of what i'd like to achieve, with the
drawback, that i have to
manually force the text to the right. if i don't do that, the text
will show up above the div,
although z-index is set. the second drawback is, that if the
reserved space is too small, this
text will hang down into the next entry. both problems are made
visible in the last example at
the bottom...
</div>
<div id="shows_1" style="display:none; width:100;
border-top:1px solid #db2b2b; border-bottom:1px solid #db2b2b;
background-color:#cccccc; z-index:10; padding: 0 5 0 5;">
<strong>
<nobr>this div contains </nobr><br>
<nobr>details</nobr><br>
</strong>
</div>
 
</div></td>
<td valign="_top"> 
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</td>
</tr>

<tr>
<td bgcolor=#cc7777> </td>
<td bgcolor=#cc7777> </td>
</tr>



<tr align=right onMouseOver="toggleDiv('shows_2','1');"
onMouseOut="toggleDiv('shows_2','0');">
<td width="500" bgcolor=#dddddd align=left><strong>mouseover
here to open details</strong></td>
<td valign=top> </td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500; border=1px
solid #999999">
<div id="shows_2" style="display:none; width:100;
border-top:1px solid #db2b2b; border-bottom:1px solid #db2b2b;
background-color:#cccccc; z-index:10; padding: 0 5 0 5;">
<strong>
<nobr>this div should </nobr><br>
<nobr>open over the text</nobr><br>
<nobr>and not scale the table</nobr><br>
</strong>
</div>

<span align=right>
<strong>this text and should be right-aligned and the details should
open over the text, without the whole table scaling up</strong><Br>
A Olórin i yáresse Mentaner i Númeherui Tírien i Rómenóri, Maiaron i
oiosaila Manan elye etevanne Nórie i malanelye? Ú-reniathach i amar
galen I reniad lín ne môr, nuithannen In gwidh ristennin, i fae
narchannen I Lach Anor ed ardhon gwannen Calad veleg, ethuiannen. Melme
nóren sina núra ala Eäro. Ilfirin nairelma ullume nucuvalme Nauva i
nauva.A Elbereth Gilthoniel, silivren penna miriel o menel aglar
elenath, na-chaered palan diriel o
<br>
</span>

 
</div></td>
<td valign="_top" style="padding-left:10">second try with
only one div. sadly, the whole table is scaled... bad, bad, bad...
<br>
<br>
<br>
<br>
<br>
</td>
</tr>

<tr>
<td bgcolor=#cc7777> </td>
<td bgcolor=#cc7777> </td>
</tr>



<tr align=right onMouseOver="toggleDiv('shows_3','1');"
onMouseOut="toggleDiv('shows_3','0');">
<td width="500" align=left bgcolor=#cccccc><strong>mouseover
here to open details (second variant)</strong></td>
<td class=bar_l2_small valign=top> </td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500;">
<div align=right style="z-index:1; width:500;
position:absolute; right:0; border:1px;">
<strong>alignment of both elements is fine, but the text is still
over the detail-div and flows out of the containing cell-box</strong><Br>
A Olórin i yáresse Mentaner i Númeherui Tírien i Rómenóri, Maiaron
i oiosaila Manan elye etevanne Nórie i malanelye? Ú-reniathach i amar
galen I reniad lín ne môr, nuithannen In gwidh ristennin, i fae
narchannen I Lach Anor ed ardhon gwannen Calad veleg, ethuiannen. Melme
nóren sina núra ala Eäro. Ilfirin nairelma ullume nucuvalme Nauva i
nauva.A Elbereth Gilthoniel, silivren penna miriel o menel aglar
elenath, na-chaered palan diriel o
</div>
<div id="shows_3" style="display:none; width:100;
border-top:1px solid #db2b2b; border-bottom:1px solid #db2b2b;
background-color:#cccccc; z-index:10; padding: 0 5 0 5;">
<strong>
<nobr>this div should open over the text</nobr><br>
<nobr>bla</nobr><br>
<nobr>bla</nobr><br>
</strong>
</div>
 
</div></td>
<td valign="_top" style="padding-left:10">in here, the
problems of the first entry are made visible: the detail-div lies below
the text, although z-index is set. The second problem: if the text gros
too big, it flows out of the containing cell...

</td>
</tr>

</table></td>
</tr>
</table>
<br>
<br>
<br>

</body>
</html>

11-14-2006

On 2006-11-14, Susanne West <> wrote:
>
>
>
> hi...
>
> i'm trying to sort out a problem with a table containing multiple
> entries and one div-overlay for each entry (let's call it entry-
> details), and i just can't get it to work properly:

In the first version, also set position: relative on div#shows_1.
z-index only applies to positioned elements, which is why your z-index:
10 wasn't doing anything.

> in one version i tried, the div that i'm showing/hiding scales the
> whole table up and down because it thinks it's part of the regular text.
> that i definately don't want!

In the second example, set position: absolute on div#shows_2. That takes
it out of the normal flow (so the table doesn't grow to fit it in), and
also puts it on top (positioned things are drawn on top of normal-flow
descendents anyway, no need to set z-index).

> the second version i tried looks fine somehow, but the z-index seems
> to be completely disrespected and then the text seems to be flowing
> out of the containing cell if it becomes too long...

Set position: relative on div#shows_3 to get the z-index working (or
just set position: absolute and don't bother setting z-index).

It overflows the containing cell because you use <nobr> (which amounts
to whitespace: nowrap) and you've set a width. There just isn't room for
the text and you've told the browser not to break lines, so it
overflows.

If you set position: absolute, get rid of z-index which is no longer
necessary (absolute things go on top anyway), and remove width: 100,
then the div gets a shrink-to-fit width (that's what absolutely
positioned things with auto width do), which means it grows to the right
size for the text.

Incidentally you should use "100px" not just "100".

11-15-2006

hi

thanks for your effort!

i followed your suggestions but the problem remains (IE6)

>>i'm trying to sort out a problem with a table containing multiple
>>entries and one div-overlay for each entry (let's call it entry-
>>details), and i just can't get it to work properly:
>
> In the first version, also set position: relative on div#shows_1.
> z-index only applies to positioned elements, which is why your z-index:
> 10 wasn't doing anything.

jep. but that version has enough space anyway..

>>in one version i tried, the div that i'm showing/hiding scales the
>>whole table up and down because it thinks it's part of the regular text.
>>that i definately don't want!
>
> In the second example, set position: absolute on div#shows_2. That takes
> it out of the normal flow (so the table doesn't grow to fit it in), and
> also puts it on top (positioned things are drawn on top of normal-flow
> descendents anyway, no need to set z-index).
>
right, but the larger text still disrespects the span align=right and
alings to the left of the cell. if i could get the text right-aligned,
that would be the solution i'd go for.

>>the second version i tried looks fine somehow, but the z-index seems
>>to be completely disrespected and then the text seems to be flowing
>>out of the containing cell if it becomes too long...
>
>
> Set position: relative on div#shows_3 to get the z-index working (or
> just set position: absolute and don't bother setting z-index).
>
> It overflows the containing cell because you use <nobr> (which amounts
> to whitespace: nowrap) and you've set a width. There just isn't room for
> the text and you've told the browser not to break lines, so it
> overflows.

can't follow you here. i was referring to the cell that contains the
larger amount of text 'alignment of both...'). that has no NOBR and
is encapsulated in a div which should result in normal textflow
within the div.

> If you set position: absolute, get rid of z-index which is no longer
> necessary (absolute things go on top anyway), and remove width: 100,
> then the div gets a shrink-to-fit width (that's what absolutely
> positioned things with auto width do), which means it grows to the right
> size for the text.

not true. there's a <div><div></div><div></div></div> structure
in the third example and i still get the first encapsulated div on
top of the second (text on top of 'details').

> Incidentally you should use "100px" not just "100".
jup. true.

updated code

-------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script language="JavaScript" type="text/JavaScript">

</script>
</head>

<body>
<table width=100% border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="13"> </td>
<td align="left">
<table width="96%" border="0" cellspacing="0">

<tr>
<td bgcolor=#cc7777> </td>
<td bgcolor=#cc7777> </td>
</tr>



<tr align=right onMouseOver="toggleDiv('shows_1','1');"
onMouseOut="toggleDiv('shows_1','0');">
<td width="500" align=left bgcolor=#cccccc><strong>mouseover
here to open details</strong></td>
<td class=bar_l2_small valign=top> </td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500;">
<div align=right style="z-index:1; width:500;
position:relative; right:0; border:1px;">
this is basically the 'look' of what i'd like to achieve, with the
drawback, that i have to
manually force the text to the right. if i don't do that, the text
will show up above the div,
although z-index is set. the second drawback is, that if the
reserved space is too small, this
text will hang down into the next entry. both problems are made
visible in the last example at
the bottom...
</div>
<div id="shows_1" style="display:none; width:100px;
border-top:1px solid #db2b2b; border-bottom:1px solid #db2b2b;
background-color:#cccccc; z-index:10; padding: 0 5 0 5;">
<strong>
<nobr>this div contains </nobr><br>
<nobr>details</nobr><br>
</strong>
</div>
 
</div></td>
<td valign="_top"> 
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</td>
</tr>

<tr>
<td bgcolor=#cc7777> </td>
<td bgcolor=#cc7777> </td>
</tr>



<tr align=right onMouseOver="toggleDiv('shows_2','1');"
onMouseOut="toggleDiv('shows_2','0');">
<td width="500" bgcolor=#dddddd align=left><strong>mouseover
here to open details</strong></td>
<td valign=top> </td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500; border=1px
solid #999999">
<div id="shows_2" style="position:absolute; display:none;
width:100px; border-top:1px solid #db2b2b; border-bottom:1px solid
#db2b2b; background-color:#cccccc; z-index:10; padding: 0 5 0 5;">
<strong>
<nobr>this div should </nobr><br>
<nobr>open over the text</nobr><br>
<nobr>and not scale the table</nobr><br>
</strong>
</div>

<span align=right>
<strong>this text and should be right-aligned and the details should
open over the text, without the whole table scaling up</strong><Br>
A Olórin i yáresse Mentaner i Númeherui Tírien i Rómenóri, Maiaron i
oiosaila Manan elye etevanne Nórie i malanelye? Ú-reniathach i amar
galen I reniad lín ne môr, nuithannen In gwidh ristennin, i fae
narchannen I Lach Anor ed ardhon gwannen Calad veleg, ethuiannen. Melme
nóren sina núra ala Eäro. Ilfirin nairelma ullume nucuvalme Nauva i
nauva.A Elbereth Gilthoniel, silivren penna miriel o menel aglar
elenath, na-chaered palan diriel o
<br>
</span>

 
</div></td>
<td valign="_top" style="padding-left:10">second try with
only one div. sadly, the whole table is scaled... bad, bad, bad...
<br>
<br>
<br>
<br>
<br>
</td>
</tr>

<tr>
<td bgcolor=#cc7777> </td>
<td bgcolor=#cc7777> </td>
</tr>



<tr align=right onMouseOver="toggleDiv('shows_3','1');"
onMouseOut="toggleDiv('shows_3','0');">
<td width="500" align=left bgcolor=#cccccc><strong>mouseover
here to open details (second variant)</strong></td>
<td class=bar_l2_small valign=top> </td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500;">
<div align=right style="z-index:1; width:500;
position:absolute; right:0; border:1px;">
<strong>alignment of both elements is fine, but the text is still
over the detail-div and flows out of the containing cell-box</strong><Br>
A Olórin i yáresse Mentaner i Númeherui Tírien i Rómenóri, Maiaron
i oiosaila Manan elye etevanne Nórie i malanelye? Ú-reniathach i amar
galen I reniad lín ne môr, nuithannen In gwidh ristennin, i fae
narchannen I Lach Anor ed ardhon gwannen Calad veleg, ethuiannen. Melme
nóren sina núra ala Eäro. Ilfirin nairelma ullume nucuvalme Nauva i
nauva.A Elbereth Gilthoniel, silivren penna miriel o menel aglar
elenath, na-chaered palan diriel o
</div>
<div id="shows_3" style="position:absolute; display:none;
border-top:1px solid #db2b2b; border-bottom:1px solid #db2b2b;
background-color:#cccccc; padding: 0 5 0 5;">
<strong>
<nobr>this div should open over the text</nobr><br>
<nobr>bla</nobr><br>
<nobr>bla</nobr><br>
</strong>
</div>
 
</div></td>
<td valign="_top" style="padding-left:10">in here, the
problems of the first entry are made visible: the detail-div lies below
the text, although z-index is set. The second problem: if the text gros
too big, it flows out of the containing cell...

</td>
</tr>

</table></td>
</tr>
</table>
<br>
<br>
<br>

</body>
</html>

11-15-2006

On 2006-11-15, Susanne West <> wrote:
[snip]
>> In the second example, set position: absolute on div#shows_2. That takes
>> it out of the normal flow (so the table doesn't grow to fit it in), and
>> also puts it on top (positioned things are drawn on top of normal-flow
>> descendents anyway, no need to set z-index).
>>
> right, but the larger text still disrespects the span align=right and
> alings to the left of the cell. if i could get the text right-aligned,
> that would be the solution i'd go for.

You can't set "align=right" on a span, it's invalid HTML for one thing,
but also doesn't make sense. Right-alignment is something you set on a
block, which determines how the block lays out the inline things inside
it.

You can set "align=right" (or 'style="text-align: right"') on the td, or
you could change that span to a div, and set style=text-align: right on
that.

[snip]
>> It overflows the containing cell because you use <nobr> (which amounts
>> to whitespace: nowrap) and you've set a width. There just isn't room for
>> the text and you've told the browser not to break lines, so it
>> overflows.
>
> can't follow you here. i was referring to the cell that contains the
> larger amount of text 'alignment of both...'). that has no NOBR and
> is encapsulated in a div which should result in normal textflow
> within the div.

Ah, I thought you were talking about the bit that pops up. But I can't
follow _you_ here, I can't see anything overflowing the <td> in my
browser (Firefox).

>> If you set position: absolute, get rid of z-index which is no longer
>> necessary (absolute things go on top anyway), and remove width: 100,
>> then the div gets a shrink-to-fit width (that's what absolutely
>> positioned things with auto width do), which means it grows to the right
>> size for the text.
>
> not true. there's a <div><div></div><div></div></div> structure
> in the third example and i still get the first encapsulated div on
> top of the second (text on top of 'details').

That's because you've set a z-index (of 1) on the thing #shows_3 is
supposed to be appearing on top of. Actually #shows_3 appears behind it
but it has a transparent background (the default) which is why you can
see #shows_3 at all.

Unless I've misunderstood what you're talking about.

11-15-2006

fist things first: it works! koudos! thanks a bunch!

i think i just tangled myself up in all the variations and
tests to get this working! you know how that can be - looking
in all the wrong places...

to the details:

>>>In the second example, set position: absolute on div#shows_2. That takes
>>>it out of the normal flow (so the table doesn't grow to fit it in), and
>>>also puts it on top (positioned things are drawn on top of normal-flow
>>>descendents anyway, no need to set z-index).
>>>
>>
>>right, but the larger text still disrespects the span align=right and
>>alings to the left of the cell. if i could get the text right-aligned,
>>that would be the solution i'd go for.
>
>
> You can't set "align=right" on a span, it's invalid HTML for one thing,
> but also doesn't make sense. Right-alignment is something you set on a
> block, which determines how the block lays out the inline things inside
> it.
>
> You can set "align=right" (or 'style="text-align: right"') on the td, or
> you could change that span to a div, and set style=text-align: right on
> that.
>

totally true! switched span to div and got what i wanted.
had not tried that, because that div had yielded to bad results in
a different context, had to switch it to a span and ignored it from
then on.

> [snip]
>>
>>can't follow you here. i was referring to the cell that contains the
>>larger amount of text 'alignment of both...'). that has no NOBR and
>>is encapsulated in a div which should result in normal textflow
>>within the div.
>
>
> Ah, I thought you were talking about the bit that pops up. But I can't
> follow _you_ here, I can't see anything overflowing the <td> in my
> browser (Firefox).
>
>
caveat: we were talking about the third example. that clearly flows
out of the td, even in firefox (just tested that). but as i said, the
second variant was the one of choice. nevermind this bugger...

>>>If you set position: absolute, get rid of z-index which is no longer
>>>necessary (absolute things go on top anyway), and remove width: 100,
>>>then the div gets a shrink-to-fit width (that's what absolutely
>>>positioned things with auto width do), which means it grows to the right
>>>size for the text.
>>
>>not true. there's a <div><div></div><div></div></div> structure
>>in the third example and i still get the first encapsulated div on
>>top of the second (text on top of 'details').
>
>
> That's because you've set a z-index (of 1) on the thing #shows_3 is
> supposed to be appearing on top of. Actually #shows_3 appears behind it
> but it has a transparent background (the default) which is why you can
> see #shows_3 at all.
>
> Unless I've misunderstood what you're talking about.
>
again: in the version i had attached in the reply(!), i had removed the
z-index of the div below and it still didn't do it. you were right for
the first bits of code i posted.

just for the sake of it, i attach a cleaned version of the code with
the solution of choice and two different amounts of text...

--------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script language="JavaScript" type="text/JavaScript">

</script>
</head>

<body>
<table width=100% border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="13"> </td>
<td align="left">
<table width="96%" border="0" cellspacing="0">

<tr>
<td bgcolor=#cc7777> </td>
<td bgcolor=#cc7777> </td>
</tr>



<tr align=right onMouseOver="toggleDiv('shows_2','1');"
onMouseOut="toggleDiv('shows_2','0');">
<td width="500" bgcolor=#dddddd align=left><strong>mouseover
here to open details</strong></td>
<td valign=top> </td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500; border=1px
solid #999999">
<div id="shows_2" style="position:absolute; display:none;
width:100px; border-top:1px solid #db2b2b; border-bottom:1px solid
#db2b2b; background-color:#cccccc; z-index:10; padding: 0 5 0 5;">
<strong>
<nobr>this div should </nobr><br>
<nobr>open over the text</nobr><br>
<nobr>and not scale the table</nobr><br>
</strong>
</div>

<div align=right>
<strong>this text and should be right-aligned and the details should
open over the text, without the whole table scaling up</strong><Br>
A Olórin i yáresse Mentaner i Númeherui Tírien i Rómenóri, Maiaron i
oiosaila Manan elye etevanne Nórie i malanelye? Ú-reniathach i amar
galen I reniad lín ne môr, nuithannen In gwidh ristennin, i fae
narchannen I Lach Anor ed ardhon gwannen Calad veleg, ethuiannen. Melme
nóren sina núra ala Eäro. Ilfirin nairelma ullume nucuvalme Nauva i
nauva.A Elbereth Gilthoniel, silivren penna miriel o menel aglar
elenath, na-chaered palan diriel o
<br>
</div>

 
</div></td>
<td valign="_top" style="padding-left:10">second try with
only one div. sadly, the whole table is scaled... bad, bad, bad...
<br>
<br>
<br>
<br>
<br>
</td>
</tr>

<tr>
<td bgcolor=#cc7777> </td>
<td bgcolor=#cc7777> </td>
</tr>



<tr align=right onMouseOver="toggleDiv('shows_3','1');"
onMouseOut="toggleDiv('shows_3','0');">
<td width="500" bgcolor=#dddddd align=left><strong>mouseover
here to open details</strong></td>
<td valign=top> </td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500; border=1px
solid #999999">
<div id="shows_3" style="position:absolute; display:none;
width:100px; border-top:1px solid #db2b2b; border-bottom:1px solid
#db2b2b; background-color:#cccccc; z-index:10; padding: 0 5 0 5;">
<strong>
<nobr>this div should </nobr><br>
<nobr>open over the text</nobr><br>
<nobr>and not scale the table</nobr><br>
</strong>
</div>

<div align=right>
almost no text
</div>

 
</div></td>
<td valign="_top" style="padding-left:10">
<br>
<br>
<br>
<br>
<br>
</td>
</tr>

<tr>
<td bgcolor=#cc7777> </td>
<td bgcolor=#cc7777> </td>
</tr>

</table></td>
</tr>
</table>
<br>
<br>
<br>

</body>
</html>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Re: How include a large array?	Edward A. Falk	C Programming	1	04-04-2013 08:07 PM
<div ... /> and <div ...></div>	K Viltersten	ASP .Net	4	03-31-2009 07:33 PM
NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider	mscir	Javascript	3	06-26-2005 04:04 PM
Q: Div A inside Div B is larger than Div B	Dwayne Madsen	Javascript	1	06-01-2005 03:02 PM
How do I have a table cell fetch another page to display within the cell?	Phillip Roncoroni	HTML	14	04-05-2004 05:58 PM