Home/ Questions/Q 7083017
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T07:07:35+00:00

I have a table with expand/collapse javascript acting on the class value assigned to

  • 0

I have a table with expand/collapse javascript acting on the class value assigned to tr.
See below html code.
This all works fine in Chrome, but in IE when I expand and then collapse the www row, I get additional unwanted lines in the xxx and zzz rows. The lines look like they are borders (see css td border-style definition). It looks as if the borders of the collapsed and hidden rows are still shown (non-button rows are a little less high than the button rows, apparently because of standard button padding and border widths).

screenprint from IE

Why is this, and how can I prevent this from occurring?

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Example</title>
      <style type="text/css">
body, p {
    background-color: white;
    font-family: Verdana;
    font-size: 10pt;
    font-style: normal;
    color: black;
    margin-bottom: 4.5pt;
    margin-top: 0pt;
}

table {
    border: solid black 1pt;
    border-collapse: collapse;
    padding: 0;
    border-spacing: 0;
}

th {
    background: rgb(255, 255, 153);
    border-style: solid;
    border-color: black;
    border-width: 1pt;
    padding: 0cm 5pt;
    color: black;
    font-family: Verdana;
        font-size: 10pt;
    font-style: normal;
    vertical-align: top;
}
td {
    border-style: dotted dotted none none;
    border-color: black;
    border-width: 1pt;
    padding: 0cm 5pt;
    color: black;
    font-style: normal;
    font-family: Verdana;
        font-size: 10pt;
    vertical-align: top;
    margin-bottom: 4.5pt;
    margin-top: 0pt;
}

input.buttonSeq {
    color: blue;
    background: ffffcc;
    border: none;
    margin-left:0pt;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 100%;
}

</style>
      <script type="text/javascript" language="javascript">
//expand and collapse tr functions based on class
function ToggleTRbyClass(clss){
    var trs = document.getElementsByTagName('tr');
    for (var i=0; i!=trs.length; i++) {
        if (trs[i].className == clss) {
            if (    trs[i].style.display == "none")
                {
                trs[i].style.display = "table-row"
                }
            else    {
                trs[i].style.display = "none"
                }
        }
    }
    return true;
}
</script>
      </head>
   <body>
      <br><br>
      <table style="table-layout:fixed word-break:break-all">
         <col width="120">
         <thead>
            <tr>
               <th>Element</th>
            </tr>
         </thead>
         <tbody>
            <tr bgcolor="ffffcc">
               <td align="left" style="font-style:italic; font-weight: bold">
                  <div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('www'); return true;" onMouseOver="this.style.cursor='hand'" value="www"></div>
               </td>
            </tr>
            <tr style="display:none" class="www">
               <td>element1</td>
            </tr>
            <tr style="display:none" class="www">
               <td>element2</td>
            </tr>
            <tr style="display:none" class="www">
               <td>element3</td>
            </tr>
            <tr bgcolor="ffffcc">
               <td align="left" style="font-style:italic; font-weight: bold">
                  <div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('xxx'); return true;" onMouseOver="this.style.cursor='hand'" value="xxx"></div>
               </td>
            </tr>
            <tr style="display:none" class="xxx">
               <td>element4</td>
            </tr>
            <tr bgcolor="ffffcc">
               <td align="left" style="font-style:italic; font-weight: bold">
                  <div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('zzz'); return true;" onMouseOver="this.style.cursor='hand'" value="zzz"></div>
               </td>
            </tr>
            <tr style="display:none" class="zzz">
               <td>element5</td>
            </tr>
         </tbody>
      </table><br></body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to specify a doctype as the first line in your markup. Without a doctype, IE will render in quirks mode, which is essentially the IE 5.5 rendering engine. Quirks mode greatly effects the box model and Javascript support, among other things.

    Example:

    <!doctype html>

    Specifying the doctype will make your example work as it does in Firefox.

    Edit:

    The grey background comes from the following rule, which is technically wrong (you need to specify the # symbol when using hex colors:

    input.buttonSeq {
    color: blue;
    background: ffffcc; /* change this to #ffffcc */
    border: none;
    margin-left:0pt;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 100%;
}
    • 0