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">
..menubackground {
position: absolute;
top: 0;
left: 0;
width: 140;
height: 100%;
background= #013571;
z-index: 1;
}
..datapagebackground {
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;
}
..selectedmenuitem {
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="JSCRIPT" type="text/javascript">
var MenuArray = new Array(0);
function MenuClick(clickeditem) {
/* Reset all buttons and pages */
if (MenuArray.length == 0)
LoadMenuArray();
for (var x=0; x<MenuArray.length; x++) {
document.getElementById(MenuArray[x]).className = "menuitem";
document.getElementById(MenuArray[x] +
"page").style.visibility = "hidden";
}
/* Highlight our new item */
clickeditem.className = "selectedmenuitem";
/* Show the appropriate div element */
var pageobj;
pageobj = document.getElementById(clickeditem.id + "page");
pageobj.style.width = getInsideWindowWidth() - 140;
pageobj.style.visibility = "visible";
}
function LoadMenuArray() {
var x;
/* Need to load all of the Menu elements to be processed later */
/* Clear out the current elements */
while (MenuArray.length > 0)
{
MenuArray.pop();
}
/* Load the new elements */
for (x=0; x<document.all.length; x++)
{
if (document.all[x].name == "menuelement")
MenuArray.push(document.all[x].id);
}
}
function getInsideWindowWidth() {
var isIE6CSS = (document.compatMode &&
document.compatMode.indexOf("CSS1") >= 0) ? true : false;
if (window.innerWidth) {
return window.innerWidth;
} else if (isIE6CSS) {
return document.body.parentElement.clientWidth;
} else if (document.body && document.body.clientWidth) {
return document.body.clientWidth;
}
return 0;
}
</script>
<title>Border Bleed Through Demo</title>
</head>
<body>
<div id="menuback" class="menubackground">
<div id="menugeneral" class="selectedmenuitem" name="menuelement"
align="center" onclick="MenuClick(this);">
General
</div>
<div>
</div>
<div id="menutable2" class="menuitem" name="menuelement"
align="center" onclick="MenuClick(this);">
Table 2
</div>
</div>
<div id="menugeneralpage" class="datapagebackground"
style="visibility:visible;">
<table width="100%" class="normaltext">
<col valign="top" align="left" width="100%">
<tr>
<td><span class="labeltext">The rest of this page should be
blank</span></td>
</tr>
</table>
</div>
<div id="menutable2page" class="datapagebackground"
style="visibility:hidden;">
<br>
<table width="100%" id="table2" border="0" style="border:'2 white
solid';" rules="cols">
<caption align="center" valign="bottom" class="labeltext">
<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"><span class="tabletxt">Testing</span></td>
<td class="RC_Y"><span 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"><span 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"><span 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"><span class="tabletxt">test3b</span></td>
</tr>
</tbody>
</table>
<br>
</div>
</body>
</html>
