borderStyle = "none" leaves blank spaces

Discussion in 'Javascript' started by spifster, Jun 5, 2006.

  1. spifster

    spifster Guest

    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
    spifster, Jun 5, 2006
    #1
    1. Advertising

  2. spifster

    Ian Collins Guest

    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.
    Ian Collins, Jun 5, 2006
    #2
    1. Advertising

  3. spifster

    spifster Guest

    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.
    spifster, Jun 7, 2006
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. David Freeman
    Replies:
    8
    Views:
    7,631
    tcena9
    Feb 16, 2011
  2. David Freeman
    Replies:
    5
    Views:
    224
    Nay Myo Aung
    Dec 27, 2004
  3. length power
    Replies:
    2
    Views:
    72
    Rustom Mody
    Apr 10, 2014
  4. Skip Montanaro
    Replies:
    0
    Views:
    56
    Skip Montanaro
    Apr 10, 2014
  5. Johannes Schneider

    Re: why i have the output of [None, None, None]

    Johannes Schneider, Apr 10, 2014, in forum: Python
    Replies:
    0
    Views:
    49
    Johannes Schneider
    Apr 10, 2014
Loading...

Share This Page