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;"><!-- if border-collapse is
removed here, div is truely hidden-->
<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">
<!-- if border-collapse is removed from table below, div is truely
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>
