Hi all,
I am trying to create a page that contains a number of div elements,
with links on the left side of the page allowing the user to select
which div to display. Some of the pages contain tables with border
styles used to block off the columns and the headers, but not the
individual rows. The pages will be displayed using IE 5.5 and later
in the finished app. Now to the problem, which is a little awkward to
describe:
When I apply the styles to do these interior border lines in a div
that is not displayed by default, the borders (but not the table
contents) bleed through to the default div. Once each of the table
divs has been selected, its border lines are not visible in the other
divs. So, once the user views each of the tables once, he can
navigate through the div elements freely, with the table borders
displaying only when the table is selected. Maybe an example would
help...
(Note: I have been able to make the lines behave correctly by using
'display: none' in the default CSS class for the table elements and
then looping through the elements and changing the class to one
without 'display: none' in it when the user chooses to view the table,
but this is excessively slow when I have a number of large tables (10
seconds or so in some cases).)
Thanks for any help,
Jon
<!----------------START HTML-------------------->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<style type="text/css">
..menubackgroun d {
position: absolute;
top: 0;
left: 0;
width: 140;
height: 100%;
background= #013571;
z-index: 1;
}
..datapagebackg round {
color: white;
position: absolute;
top: 0;
left: 140;
height: 100%;
z-index: 1;
overflow: hidden;
background= #011B4E;
}
..menuitem {
color: white;
z-index: 1;
border-style: solid;
border-color: #013571;
cursor: hand;
}
..selectedmenui tem {
font-weight: bolder;
color: yellow;
border-style: inset;
z-index: 2;
}
..normaltext {
color: white;
}
..labeltext {
color: yellow;
font-weight: bolder;
}
..txt {
color: gray;
z-order: 3
}
..tabletxt {
color: white;
z-order: 3;
}
..RC_Y {
border-bottom:'2 white solid';
border-right: '2 white solid';
}
..RC_N {
border-bottom:'none';
border-right: 'none';
}
..RY_CN{
border-bottom:'2 white solid';
border-right: 'none';
}
..RN_CY{
border-bottom:'none';
border-right:'2 white solid';
}
</style>
<script language="JSCRI PT" type="text/javascript">
var MenuArray = new Array(0);
function MenuClick(click editem) {
/* Reset all buttons and pages */
if (MenuArray.leng th == 0)
LoadMenuArray() ;
for (var x=0; x<MenuArray.len gth; x++) {
document.getEle mentById(MenuAr ray[x]).className = "menuitem";
document.getEle mentById(MenuAr ray[x] +
"page").style.v isibility = "hidden";
}
/* Highlight our new item */
clickeditem.cla ssName = "selectedmenuit em";
/* Show the appropriate div element */
var pageobj;
pageobj = document.getEle mentById(clicke ditem.id + "page");
pageobj.style.w idth = getInsideWindow Width() - 140;
pageobj.style.v isibility = "visible";
}
function LoadMenuArray() {
var x;
/* Need to load all of the Menu elements to be processed later */
/* Clear out the current elements */
while (MenuArray.leng th > 0)
{
MenuArray.pop() ;
}
/* Load the new elements */
for (x=0; x<document.all. length; x++)
{
if (document.all[x].name == "menuelemen t")
MenuArray.push( document.all[x].id);
}
}
function getInsideWindow Width() {
var isIE6CSS = (document.compa tMode &&
document.compat Mode.indexOf("C SS1") >= 0) ? true : false;
if (window.innerWi dth) {
return window.innerWid th;
} else if (isIE6CSS) {
return document.body.p arentElement.cl ientWidth;
} else if (document.body && document.body.c lientWidth) {
return document.body.c lientWidth;
}
return 0;
}
</script>
<title>Border Bleed Through Demo</title>
</head>
<body>
<div id="menuback" class="menuback ground">
<div id="menugeneral " class="selected menuitem" name="menueleme nt"
align="center" onclick="MenuCl ick(this);">
General
</div>
<div>
</div>
<div id="menutable2 " class="menuitem " name="menueleme nt"
align="center" onclick="MenuCl ick(this);">
Table 2
</div>
</div>
<div id="menugeneral page" class="datapage background"
style="visibili ty:visible;">
<table width="100%" class="normalte xt">
<col valign="top" align="left" width="100%">
<tr>
<td><span class="labeltex t">The rest of this page should be
blank</span></td>
</tr>
</table>
</div>
<div id="menutable2p age" class="datapage background"
style="visibili ty:hidden;">
<br>
<table width="100%" id="table2" border="0" style="border:' 2 white
solid';" rules="cols">
<caption align="center" valign="bottom" class="labeltex t">
<br>
Table 2
</caption>
<colgroup align="left" charoff="50">
<col align="left" width="43.20pt" >
<col align="left" width="94.32pt" >
<col align="left" width="78.48pt" >
</colgroup>
<tbody valign="top">
<tr class="RC_N">
<td class="RC_Y"><s pan class="tabletxt ">Testing</span></td>
<td class="RC_Y"><s pan class="tabletxt ">Testing
1,2,3</span></td>
<td class="RY_CN">< span class="tabletxt ">Testing
3,2,1</span></td>
</tr>
<tr class="RC_N">
<td class="RN_CY">< span class="tabletxt ">1</span></td>
<td class="RN_CY">< span class="tabletxt ">test1a</span></td>
<td class="RC_N"><s pan class="tabletxt ">test1b</span></td>
</tr>
<tr class="RC_N">
<td class="RN_CY">< span class="tabletxt ">2</span></td>
<td class="RN_CY">< span class="tabletxt ">test2a</span></td>
<td class="RC_N"><s pan class="tabletxt ">test2b</span></td>
</tr>
<tr class="RY_CN">
<td class="RN_CY">< span class="tabletxt ">3</span></td>
<td class="RN_CY">< span class="tabletxt ">test3a</span></td>
<td class="RC_N"><s pan class="tabletxt ">test3b</span></td>
</tr>
</tbody>
</table>
<br>
</div>
</body>
</html>
