473,373 Members | 1,421 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,373 software developers and data experts.

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 4719
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: Sam Sungshik Kong | last post by:
Hello! I use Python for ASP programming. I found something weird. Response.Write(Request("something")) It draws "None" when there's no value for something. Actually I expect "" instead of...
13
by: Dan R Brown | last post by:
I have a large form that is generated dynamically in a jsp using xml / xslt. So, to break up this form into several "tabbed" sections, I break up the form using <div> tags. Each <div...
5
by: Daniel Crespo | last post by:
Is there a built-in method for transforming (1,None,"Hello!") to 1,None,"Hello!"? Thanks
5
by: Sue | last post by:
Help! I have an asp table with an embedded table. The asp tablerow that contains this table has a static ID assigned of "FilterRow2" (see snippets of code below). When I click on the button to set...
5
by: z. f. | last post by:
sorry about the previous post, by mistake not completed. i have an asp.net page with the line <%@ OutputCache Duration="30" VaryByParam="none" %> but when i make requests to the page with...
2
by: Nathan Sokalski | last post by:
I have several DropDownList controls on my page that use databinding. However, I want to give users the option of selecting a choice such as "None Selected" or something else that shows they did...
2
by: Good Man | last post by:
Hi there I have quite a bit of experience with CSS but I am stumped by the following: http://www.electricphase.com/example/example1.php (uses http://www.electricphase.com/example/test1.css) ...
3
by: Kappucino XL | last post by:
Hi there... What is the VBA Code for inserting the string "none", in every blank textbox, in a report? My system, generates a report from a query. eg: textbox1: FirstName ; textbox2: Middle Name;...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.