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

Discussion in 'HTML' started by Susanne West, Nov 14, 2006.

  1. Susanne West

    Susanne West Guest

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

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document;
    if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
    x=d.forms[n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++)
    x=MM_findObj(n,d.layers.document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    function toggleDiv(divId,onoff) {
    var db = MM_findObj(divId);
    if (onoff == 1){
    db.style.display = 'block';
    } else {
    db.style.display = 'none';
    }
    }
    //-->
    </script>
    </head>

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


    <tr>
    <td bgcolor=#cc7777>&nbsp;</td>
    <td bgcolor=#cc7777>&nbsp;</td>
    </tr>



    <!-- variant 1 -->

    <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>&nbsp;</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>
    &nbsp;
    </div></td>
    <td valign="_top">&nbsp;
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </td>
    </tr>


    <tr>
    <td bgcolor=#cc7777>&nbsp;</td>
    <td bgcolor=#cc7777>&nbsp;</td>
    </tr>



    <!-- variant 2 -->

    <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>&nbsp;</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>

    &nbsp;
    </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>&nbsp;</td>
    <td bgcolor=#cc7777>&nbsp;</td>
    </tr>



    <!-- variant 3 -->


    <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>&nbsp;</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>
    &nbsp;
    </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>
    Susanne West, Nov 14, 2006
    #1
    1. Advertising

  2. Susanne West

    Ben C Guest

    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".
    Ben C, Nov 14, 2006
    #2
    1. Advertising

  3. Susanne West

    Susanne West Guest

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

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document;
    if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
    x=d.forms[n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++)
    x=MM_findObj(n,d.layers.document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    function toggleDiv(divId,onoff) {
    var db = MM_findObj(divId);
    if (onoff == 1){
    db.style.display = 'block';
    } else {
    db.style.display = 'none';
    }
    }
    //-->
    </script>
    </head>

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


    <tr>
    <td bgcolor=#cc7777>&nbsp;</td>
    <td bgcolor=#cc7777>&nbsp;</td>
    </tr>



    <!-- variant 1 -->

    <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>&nbsp;</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>
    &nbsp;
    </div></td>
    <td valign="_top">&nbsp;
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </td>
    </tr>


    <tr>
    <td bgcolor=#cc7777>&nbsp;</td>
    <td bgcolor=#cc7777>&nbsp;</td>
    </tr>



    <!-- variant 2 -->

    <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>&nbsp;</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>

    &nbsp;
    </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>&nbsp;</td>
    <td bgcolor=#cc7777>&nbsp;</td>
    </tr>



    <!-- variant 3 -->


    <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>&nbsp;</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>
    &nbsp;
    </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>
    Susanne West, Nov 15, 2006
    #3
  4. Susanne West

    Ben C Guest

    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.
    Ben C, Nov 15, 2006
    #4
  5. Susanne West

    Susanne West Guest

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

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document;
    if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
    x=d.forms[n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++)
    x=MM_findObj(n,d.layers.document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    function toggleDiv(divId,onoff) {
    var db = MM_findObj(divId);
    if (onoff == 1){
    db.style.display = 'block';
    } else {
    db.style.display = 'none';
    }
    }
    //-->
    </script>
    </head>

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


    <tr>
    <td bgcolor=#cc7777>&nbsp;</td>
    <td bgcolor=#cc7777>&nbsp;</td>
    </tr>




    <!-- variant 2 -->

    <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>&nbsp;</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>

    &nbsp;
    </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>&nbsp;</td>
    <td bgcolor=#cc7777>&nbsp;</td>
    </tr>




    <!-- variant 2 -->

    <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>&nbsp;</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>

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


    <tr>
    <td bgcolor=#cc7777>&nbsp;</td>
    <td bgcolor=#cc7777>&nbsp;</td>
    </tr>





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

    </body>
    </html>
    Susanne West, Nov 15, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Phillip Roncoroni
    Replies:
    14
    Views:
    1,072
    Toby A Inkster
    Apr 5, 2004
  2. John Salerno
    Replies:
    3
    Views:
    567
    John Salerno
    Feb 2, 2006
  3. dan
    Replies:
    0
    Views:
    684
  4. Replies:
    6
    Views:
    209
  5. ll
    Replies:
    2
    Views:
    630
    Thomas 'PointedEars' Lahn
    May 1, 2008
Loading...

Share This Page