seeking explanation for strange 'border-collapse' behavior

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • ireneatngs@yahoo.com
    #1

    seeking explanation for strange 'border-collapse' behavior

    Hi,

    I have example html below which contains a couple of hidden divs.
    However, some of the table borders within these hidden divs are
    actually displayed when they should not be.

    In my example, I have comments indicating that if I remove the
    'border-collapse' attribute for two of the tables within the hidden
    divs, my problem is fixed.

    However, in my real html page, I need the border-collapse attribute, or
    the tables do not display as I would like them too.
    Could anyone explain to me what I am doing wrong and how I can get the
    divs to be truely hidden without compromising the table display when it
    is necessary?

    (My example does not make sense; it is just stripped down html to show
    the unwanted affect)

    Thanks very much for any insight into my problem!!
    Irene
    p.s. I had nice indents for the display below, but on the page preview
    they were lost... sorry

    <html>
    <body onload="init(); " >
    <script language="javas cript">
    function init()
    { window.setTimeo ut( initTest, 1000 );
    }
    function initTest()
    {document.getEl ementById( 'div1' ).innerHTML =
    document.getEle mentById('div2' ).innerHTML;
    }
    </script>

    <form name="searchFor m">
    <table style="border-collapse:collap se;">
    <tr>
    <td>
    <div id="div3">
    <table style="border-collapse: collapse; border-bottom: solid thin
    Red; border-top: solid thin Red;">
    <tr>
    <td style="border-right: solid thin Blue;">xxxx</td>
    </tr>
    </table>
    </div>
    </td>
    </tr>
    </table>
    <table style="border-collapse:collap se;">
    <tr>
    <td>
    <div id="div1"></div>
    </td>
    </tr>
    </table>
    </form>
    <div id="div2" style="visibili ty:hidden">
    <table style="border-collapse:collap se;"><!-- if border-collapse is
    removed here, div is truely hidden-->
    <tr>
    <td valign="middle" style="border-top: solid thin Green;"><b><spa n
    id="spanID1">12 34</span></b>
    </td>
    </tr>
    </table>
    </div>
    <div id="div4" style="visibili ty:hidden">
    <!-- if border-collapse is removed from table below, div is truely
    hidden -->
    <table style="border-collapse:collap se; border-bottom: solid thin Red;
    border-top: solid thin Red;">
    <tr>
    <td style="border-right: solid thin Blue;">yyyy</td>
    </tr>
    </table>
    </div>
    </body>
    </html>

    Tags: None
    • ireneatngs@yahoo.com
      #2
      Re: seeking explanation for strange 'border-collapse' behavior

      Hi again,

      I forgot to mention that I am using IE 6.0.

      Would anyone know why the border-collapse table attribute is causing
      the hidden div to display some of the borders in the example below?

      Thanks,
      Irene

      ireneatngs@yaho o.com wrote:[color=blue]
      > Hi,
      >
      > I have example html below which contains a couple of hidden divs.
      > However, some of the table borders within these hidden divs are
      > actually displayed when they should not be.
      >
      > In my example, I have comments indicating that if I remove the
      > 'border-collapse' attribute for two of the tables within the hidden
      > divs, my problem is fixed.
      >
      > However, in my real html page, I need the border-collapse attribute,[/color]
      or[color=blue]
      > the tables do not display as I would like them too.
      > Could anyone explain to me what I am doing wrong and how I can get[/color]
      the[color=blue]
      > divs to be truely hidden without compromising the table display when[/color]
      it[color=blue]
      > is necessary?
      >
      > (My example does not make sense; it is just stripped down html to[/color]
      show[color=blue]
      > the unwanted affect)
      >
      > Thanks very much for any insight into my problem!!
      > Irene
      > p.s. I had nice indents for the display below, but on the page[/color]
      preview[color=blue]
      > they were lost... sorry
      >
      > <html>
      > <body onload="init(); " >
      > <script language="javas cript">
      > function init()
      > { window.setTimeo ut( initTest, 1000 );
      > }
      > function initTest()
      > {document.getEl ementById( 'div1' ).innerHTML =
      > document.getEle mentById('div2' ).innerHTML;
      > }
      > </script>
      >
      > <form name="searchFor m">
      > <table style="border-collapse:collap se;">
      > <tr>
      > <td>
      > <div id="div3">
      > <table style="border-collapse: collapse; border-bottom: solid thin
      > Red; border-top: solid thin Red;">
      > <tr>
      > <td style="border-right: solid thin Blue;">xxxx</td>
      > </tr>
      > </table>
      > </div>
      > </td>
      > </tr>
      > </table>
      > <table style="border-collapse:collap se;">
      > <tr>
      > <td>
      > <div id="div1"></div>
      > </td>
      > </tr>
      > </table>
      > </form>
      > <div id="div2" style="visibili ty:hidden">
      > <table style="border-collapse:collap se;"><!-- if border-collapse is
      > removed here, div is truely hidden-->
      > <tr>
      > <td valign="middle" style="border-top: solid thin Green;"><b><spa n
      > id="spanID1">12 34</span></b>
      > </td>
      > </tr>
      > </table>
      > </div>
      > <div id="div4" style="visibili ty:hidden">
      > <!-- if border-collapse is removed from table below, div is truely
      > hidden -->
      > <table style="border-collapse:collap se; border-bottom: solid thin[/color]
      Red;[color=blue]
      > border-top: solid thin Red;">
      > <tr>
      > <td style="border-right: solid thin Blue;">yyyy</td>
      > </tr>
      > </table>
      > </div>
      > </body>
      > </html>[/color]

        Comment

        • ireneatngs@yahoo.com
          #3
          Re: seeking explanation for strange 'border-collapse' behavior

          Hi,

          For anyone who is interested, I just happened to stumble across the
          solution (after dealing with this issue another way a while back):

          the style attribute for the table tags that were <visibility:hid den>
          should have been
          <visibility:hid den; display:none;>

          Then the 'border-collapse' table attribute works as expected.

          Irene

          ireneatngs@yaho o.com wrote:[color=blue]
          > Hi again,
          >
          > I forgot to mention that I am using IE 6.0.
          >
          > Would anyone know why the border-collapse table attribute is causing
          > the hidden div to display some of the borders in the example below?
          >
          > Thanks,
          > Irene
          >
          > ireneatngs@yaho o.com wrote:[color=green]
          > > Hi,
          > >
          > > I have example html below which contains a couple of hidden divs.
          > > However, some of the table borders within these hidden divs are
          > > actually displayed when they should not be.
          > >
          > > In my example, I have comments indicating that if I remove the
          > > 'border-collapse' attribute for two of the tables within the hidden
          > > divs, my problem is fixed.
          > >
          > > However, in my real html page, I need the border-collapse[/color][/color]
          attribute,[color=blue]
          > or[color=green]
          > > the tables do not display as I would like them too.
          > > Could anyone explain to me what I am doing wrong and how I can get[/color]
          > the[color=green]
          > > divs to be truely hidden without compromising the table display[/color][/color]
          when[color=blue]
          > it[color=green]
          > > is necessary?
          > >
          > > (My example does not make sense; it is just stripped down html to[/color]
          > show[color=green]
          > > the unwanted affect)
          > >
          > > Thanks very much for any insight into my problem!!
          > > Irene
          > > p.s. I had nice indents for the display below, but on the page[/color]
          > preview[color=green]
          > > they were lost... sorry
          > >
          > > <html>
          > > <body onload="init(); " >
          > > <script language="javas cript">
          > > function init()
          > > { window.setTimeo ut( initTest, 1000 );
          > > }
          > > function initTest()
          > > {document.getEl ementById( 'div1' ).innerHTML =
          > > document.getEle mentById('div2' ).innerHTML;
          > > }
          > > </script>
          > >
          > > <form name="searchFor m">
          > > <table style="border-collapse:collap se;">
          > > <tr>
          > > <td>
          > > <div id="div3">
          > > <table style="border-collapse: collapse; border-bottom: solid thin
          > > Red; border-top: solid thin Red;">
          > > <tr>
          > > <td style="border-right: solid thin Blue;">xxxx</td>
          > > </tr>
          > > </table>
          > > </div>
          > > </td>
          > > </tr>
          > > </table>
          > > <table style="border-collapse:collap se;">
          > > <tr>
          > > <td>
          > > <div id="div1"></div>
          > > </td>
          > > </tr>
          > > </table>
          > > </form>
          > > <div id="div2" style="visibili ty:hidden">
          > > <table style="border-collapse:collap se;"><!-- if border-collapse is
          > > removed here, div is truely hidden-->
          > > <tr>
          > > <td valign="middle" style="border-top: solid thin Green;"><b><spa n
          > > id="spanID1">12 34</span></b>
          > > </td>
          > > </tr>
          > > </table>
          > > </div>
          > > <div id="div4" style="visibili ty:hidden">
          > > <!-- if border-collapse is removed from table below, div is truely
          > > hidden -->
          > > <table style="border-collapse:collap se; border-bottom: solid thin[/color]
          > Red;[color=green]
          > > border-top: solid thin Red;">
          > > <tr>
          > > <td style="border-right: solid thin Blue;">yyyy</td>
          > > </tr>
          > > </table>
          > > </div>
          > > </body>
          > > </html>[/color][/color]

            Comment

            • Spartanicus
              #4
              Re: seeking explanation for strange 'border-collapse' behavior

              Please don't top post in this group.

              ireneatngs@yaho o.com wrote:
              [color=blue]
              ><visibility:hi dden; display:none;>[/color]

              There is no point in also setting visibility to none if display is set
              to none. See the spec for an explanation of the 2 properties.

              --
              Spartanicus

                Comment

                Previous template Next
                Working...