By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,700 Members | 1,373 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,700 IT Pros & Developers. It's quick & easy.

Border lines in hidden div bleed through into visible div

P: n/a
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>
Jul 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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" <go*********@mail.com> wrote in message
news:4f**************************@posting.google.c om...
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>

Jul 23 '05 #2

P: n/a
Jon
"Dominique" <ni****@webadstudio.com> wrote in message news:<c7**********@ctb-nnrp2.saix.net>...
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)


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

This discussion thread is closed

Replies have been disabled for this discussion.