469,270 Members | 1,396 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,270 developers. It's quick & easy.

borderStyle = "none" leaves blank spaces

Hello all,

I am building a collapsable tree using Javascript with DOM in IE. In
order to make collapsed cells disappear I have been hiding the text.
The cells collapse but still leave borders behind. I have set the
borderStyle to none and the black lines go away, but there is still
white space where the borders were. Following are my html files I am
using to test it.

----------------BEGIN HTML FILE----------------

<SCRIPT LANGUAGE="Javascript">
function hide()
{
document.getElementById("td2").style.borderStyle = "none";
document.getElementById("td3").style.borderStyle = "none";
document.getElementById("td4").style.borderStyle = "none";
document.getElementById("td5").style.borderStyle = "none";
document.getElementById("td6").style.borderStyle = "none";
document.getElementById("td7").style.borderStyle = "none";
document.getElementById("td8").style.borderStyle = "none";
document.getElementById("td9").style.borderStyle = "none";
}

function show()
{
document.getElementById("td2").style.borderStyle=" solid";
document.getElementById("td3").style.borderStyle=" solid";
document.getElementById("td4").style.borderStyle=" solid";
document.getElementById("td5").style.borderStyle=" solid";
document.getElementById("td6").style.borderStyle=" solid";
document.getElementById("td7").style.borderStyle=" solid";
document.getElementById("td8").style.borderStyle=" solid";
document.getElementById("td9").style.borderStyle=" solid";
}

</SCRIPT>

<html>
<head>
<title>Test Border</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link href="include-files/style.css" type="text/css"
rel="STYLESHEET">
</head>
<body>

<table id="tbl">
<tr id="tr1">
<td id="td1"> first table row </td>
</tr>
<tr id="tr2">
<td id="td2" > </td> <!-- style="border-width:0px;" -->
</tr>
<tr id="tr3">
<td id="td3"> </td>
</tr>
<tr id="tr4">
<td id="td4"> </td>
</tr>
<tr id="tr5">
<td id="td5"> </td>
</tr>
<tr id="tr6">
<td id="td6"> </td>
</tr>
<tr id="tr7">
<td id="td7"> </td>
</tr>
<tr id="tr8">
<td id="td8"> </td>
</tr>
<tr id="tr9">
<td id="td9"> </td>
</tr>
<tr>
<td> Blah </td>
</tr>
</table>

<input type="button" onclick="hide()" name="Hide" value="Hide">
<input type="button" onclick="show()" name="Show" value="Show">

</body>
</html>

----------------END HTML FILE----------------

----------------BEGIN CSS FILE (/include-files/style.css)-------

//a-style.css paper studios main

BODY { background-color: white}

A:link {text-decoration: none; color: 0000DD}
A:visited {text-decoration: none; color: 0000DD}
A:active {text-decoration: none}
A:hover {text-decoration: none; color: FF0000}

A.topmenu:link {text-decoration: none; color: CCFF99}
A.topmenu:visited {text-decoration: none; color:CCFF99 }
A.topmenu:active {text-decoration: none; }
A.topmenu:hover {text-decoration: none; color: CCCCFF }
P{ font: 10pt/12pt Verdana, serif }
td{ font: 10pt/12pt Verdana, serif }
caption { font: 10pt/12pt Verdana, serif }
center{font: 10pt/12pt Verdana, serif }
ul{ font: 10pt/12pt Verdana, serif }
XMP{ font: 10pt/12pt Verdana, serif }

table{border-collapse: collapse;}
td{border-width:1px; border-color:black; border-collapse:
seperate;border-style:solid;}

table.allstuff{border-collapse: collapse;}
td.white{border-width:1px; border-color:white; border-collapse:
collapse;border-style:solid;}

td.group{background:4972A3; color:white; border-width:1px;
border-color:black; border-collapse: collapse;border-style:solid;}
tr.heading{background:99cccc;}
td.blank{border-width:0px; }
td.bringDown{border-collapse: collapse; border-width: 1px;
border-color:gray;}
td.bringDown2{border-collapse: collapse; border-width: 0px;}
tr.bringDown{border-collapse: collapse; border-width: 0px;}

p.margin {margin: 4px 4px 4px 4px}

table.adds {border-color:gray; border-width:1px;
border-collapse:collapse;}
td.written {border-color:gray; border-width:1px;
border-collapse:collapse;}
tr.filled {border-color:gray; border-width:1px;
border-collapse:collapse;}
// main

----------------END CSS FILE----------------

Try these to demo what I am seeing.

I want the table rows to collapse as if they are a single solid table.
Thanks in advance,

--David

Jun 5 '06 #1
2 4518
spifster wrote:
Hello all,

I am building a collapsable tree using Javascript with DOM in IE. In
order to make collapsed cells disappear I have been hiding the text.
The cells collapse but still leave borders behind. I have set the
borderStyle to none and the black lines go away, but there is still
white space where the borders were. Following are my html files I am
using to test it.

Have you tried setting borderCollapse and/or borderSpacing?

You are probably better of using two css styles and sapping between
them, it's easier than mucking about with style attributes.

--
Ian Collins.
Jun 5 '06 #2
Yeah, I am using border-collapse and have had no luck with
border-spacing. Thanks for the css comment, I will do that. Other
than that I am still open for suggestions.

Ian Collins wrote:
spifster wrote:
Hello all,

I am building a collapsable tree using Javascript with DOM in IE. In
order to make collapsed cells disappear I have been hiding the text.
The cells collapse but still leave borders behind. I have set the
borderStyle to none and the black lines go away, but there is still
white space where the borders were. Following are my html files I am
using to test it.

Have you tried setting borderCollapse and/or borderSpacing?

You are probably better of using two css styles and sapping between
them, it's easier than mucking about with style attributes.

--
Ian Collins.


Jun 7 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

8 posts views Thread by Sam Sungshik Kong | last post: by
5 posts views Thread by Sue | last post: by
2 posts views Thread by Good Man | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.