|
Posted by ireneatngs on January 6, 2005, 11:51 am
Please log in for more thread options
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>
|
|
Posted by ireneatngs on January 11, 2005, 1:15 pm
Please log in for more thread options
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;"><!-- 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>
|
|
Posted by ireneatngs on January 21, 2005, 9:05 am
Please log in for more thread options 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:
> 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;"><!-- 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>
|
| Similar Threads | Posted | | strange behavior with IE and margin... | June 12, 2006, 2:03 am |
| Strange behavior with Service Side Include | July 31, 2008, 5:32 pm |
| ASP simple explanation anyone | March 10, 2005, 3:40 pm |
| Seeking design guidance. | September 14, 2004, 9:54 pm |
| Seeking whole site HTML validator (plus extras) | May 25, 2005, 1:33 am |
| Seeking Tool to Archive and Mark Up Websites for Searches | December 5, 2005, 11:14 am |
| odd div behavior | December 28, 2005, 1:47 pm |
|
|
