IE6-7 table inside li leave a gap
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 开发者_如何学JAVAid="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.
this will fix your problem:
.table {vertical-align: top}
Or as an IE-Hack:
.table {*vertical-align: top}
Another solution if anyone wants to know:
The table is a block element, which is why IE puts it in the next line, but you can change the display mode to inline by adding this styleinformation to your tables
style="display: inline-table"
加载中,请稍侯......
精彩评论