Stylesheets - seeking explanation for strange 'border-collapse' behavior

Author

seeking explanation for strange 'border-collapse' behavior

ireneatngs@yahoo.com

2005-01-06, 7:19 pm

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="javascript">
function init()
{ window.setTimeout( initTest, 1000 );
}
function initTest()
{document.getElementById( 'div1' ).innerHTML =
document.getElementById('div2').innerHTML;
}
</script>

<form name="searchForm">
<table style="border-collapse:collapse;">
<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:collapse;">
<tr>
<td>
<div id="div1"></div>
</td>
</tr>
</table>
</form>
<div id="div2" style="visibility:hidden">
<table style="border-collapse:collapse;">
<tr>
<td valign="middle" style="border-top: solid thin Green;"><b><span
id="spanID1">1234</span></b>
</td>
</tr>
</table>
</div>
<div id="div4" style="visibility:hidden">

<table style="border-collapse:collapse; 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>

ireneatngs@yahoo.com

2005-01-11, 7:19 pm

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@yahoo.com wrote:
> 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="javascript">
> function init()
> { window.setTimeout( initTest, 1000 );
> }
> function initTest()
> {document.getElementById( 'div1' ).innerHTML =
> document.getElementById('div2').innerHTML;
> }
> </script>
>
> <form name="searchForm">
> <table style="border-collapse:collapse;">
> <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:collapse;">
> <tr>
> <td>
> <div id="div1"></div>
> </td>
> </tr>
> </table>
> </form>
> <div id="div2" style="visibility:hidden">
> <table style="border-collapse:collapse;">
> <tr>
> <td valign="middle" style="border-top: solid thin Green;"><b><span
> id="spanID1">1234</span></b>
> </td>
> </tr>
> </table>
> </div>
> <div id="div4" style="visibility:hidden">
> 
> <table style="border-collapse:collapse; 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>

ireneatngs@yahoo.com

2005-01-15, 12:18 pm

ireneatngs@yahoo.com

2005-01-21, 12:17 pm

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:hidden>
should have been
<visibility:hidden; display:none;>

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

Irene

ireneatngs@yahoo.com wrote:[color=darkred]
> 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@yahoo.com wrote:
attribute,[color=darkred]
> or
> the
when[color=darkred]
> it
> show
> preview
> Red;

Spartanicus

2005-01-21, 12:17 pm

Please don't top post in this group.

ireneatngs@yahoo.com wrote:

><visibility:hidden; display:none;>

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