Border lines in hidden div bleed through into visible div

J

Jon

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>
 
D

Dominique

the reason why its slow is coz you're making it to unnecessary work
it has to go and chekc through every item in the array everytime...

instead, set a global variable to hold the current menu item

and when you click the next menu item, use the variable to close the current
one, then just open the new one and set it as the variable again...

see what i mean?

just tell ur script which menu item it must close the next time, that's all,
then it don't gotta crawl through an array of menu items and hide when
they're prolly already hidden

cheers :0)


Jon said:
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>
Click to expand...
 
J

Jon

Dominique said:
the reason why its slow is coz you're making it to unnecessary work
it has to go and chekc through every item in the array everytime...

instead, set a global variable to hold the current menu item

and when you click the next menu item, use the variable to close the current
one, then just open the new one and set it as the variable again...

see what i mean?

just tell ur script which menu item it must close the next time, that's all,
then it don't gotta crawl through an array of menu items and hide when
they're prolly already hidden

cheers :0)
Click to expand...

Dominique,

Thank you for the reply. I do see what you mean. The code is
certainly ineffecient, but if I make those changes, I still have the
problem of those internal table border lines bleeding through into the
div that is visible (at least until I've viewed the table and then
switched to another div). Try viewing the HTML that I posted, and
(hopefully) you will see what I mean. I would very much appreciate
any additional insights you can give me. I'm stumped. I'm pretty
sure that IE isn't handling this correctly, but even if it is, I don't
expect Microsoft to come riding to my rescue anytime soon.

Thanks again,

Jon
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Clickable Div Block 1
Filter table rows based on multiple checkboxes value 2
Image shifts to the right when export the page to pdf 4
Having trouble centering contents of td ? 3
Positioning CSS components 1
Why is the e.target not working here? 1
SendGrid email issue in responsive Gmail 1

Members online

Total: 78 (members: 2, guests: 76)
Robots: 464

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,814
Latest member
SpicetreeDigital

Latest Threads

Top