borderStyle = "none" leaves blank spaces

S

spifster

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
 
I

Ian Collins

spifster said:
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.
Click to expand...
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.
 
S

spifster

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.
 

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

Having trouble centering contents of td ? 3
Help with my responsive home page 2
Image shifts to the right when export the page to pdf 4
Help me sort out this script 1
Help needed with thank you message 5
Only one table shows up with the information 2
Buttons lining up 1
How to position the *tooltip* comment on these buttons? 9

Members online

No members online now.
Total: 41 (members: 0, guests: 41)
Robots: 203

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,042
Latest member
icassiem

Latest Threads

Top