469,600 Members | 2,393 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,600 developers. It's quick & easy.

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

Jul 23 '05 #1
2 4748
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

ir********@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;"><!-- 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>


Jul 23 '05 #2
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

ir********@yahoo.com wrote:
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

ir********@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;"><!-- 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>


Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by krunkelgarten | last post: by
9 posts views Thread by Robert Misiorowski | last post: by
6 posts views Thread by WindAndWaves | last post: by
7 posts views Thread by M O J O | last post: by
20 posts views Thread by Jim | last post: by
14 posts views Thread by Gerry Vandermaesen | last post: by
4 posts views Thread by ben.dixon | last post: by
reply views Thread by suresh191 | last post: by
4 posts views Thread by guiromero | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.