Home/ Questions/Q 617009
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T18:23:17+00:00

I am trying to create a tree using CSS. In FF works fine ,

  • 0

I am trying to create a tree using CSS.

In FF works fine , IE6-7 fails.

I have a ul/li structure and inside li I create a table to display the tree row.

On IE I have a gap between li and table.

Here is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IE 6-7 Fails</title>

<style>
.table th {white-space:nowrap; font-weight:bold;background:#EDEFF4;
padding:6px;color:#111;border-right:1px solid #D8DFEA;border-bottom:1px solid #D8DFEA}
.table th.last-child {border-right:0px solid #D8DFEA}

.table tr td {padding:6px;border-bottom:1px solid #D8DFEA;background:#ccc}
.table tr td a {color:#525252;display:block;}
.table tr td a:hover {color:#3B5998}

#wrap {margin:5px 0 0 0;color:#525252;
            border-top:1px solid #D8DFEA;
            border-right:1px solid #D8DFEA;
            border-left:1px solid #D8DFEA;
}

ul#tree  {list-style-type:none;margin:0px;padding:0px}
ul.tree {list-style-type:none;}
ul.tTree {list-style-type:none;margin:0px;padding:0px}
li.tree {margin:0px;padding:0px;}

li.tree  ul{list-style-type:none;margin:0 auto;padding:0 0 0 30px;}
li.tree  ul li{list-style-type:none;margin:0 auto;}


</style>

</head>
<body>


<div id="wrap">
<table border="0" cellspacing="0" cellpadding="0" width="100%" class="table">
<tbody>
    <tr >       
        <th class="last-child" style="text-align:left;">Name</th>   
    </tr>
 </tbody>
</table>

    <div id="treeWrap">   
    <ul id="tree">
        <li id="tree-1" class="tree">
            <table border="0" cellspacing="0" cellpadding="0" width="100%" class="table">
                <tbody>
                    <tr id="gridRow_1">
                        <td >
                            <a href="...">Title</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <ul>
                <li id="tree-2" class="tree">
                    <table border="0" cellspacing="0" cellpadding="0" width="100%" class="table">
                        <tbody>
                            <tr id="gridRow_2">
                                <td >
                                    <a href="...">Title</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </li>
            </ul>
        </li>
    </ul> 
    </div>

</div>

</body>
</html>

Its bad programming or some kind of bug?

Any suggestions are welcome.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    this will fix your problem:

    .table {vertical-align: top}

    Or as an IE-Hack:

    .table {*vertical-align: top}

    • 0