Using customized line images in Asp.Net Treeview control

Question

When I use my own line images for customizing the look and feel of the treeview control, there appears to be a rendering problem in the table row that creates the "I" line. The Lminus, Lplus, R etc line rows all gets rendered without a problem, but for some reason the "I" line gets rendered inside a div tag as follows:

<td>
<div style="width: 80px; height: 1px;">
<img alt="" src="../../../Public/TreeLineImages/i.gif"/>
</div>
</td>

This seems to overlap with the row containing the "I" below. I used firebug to remove the style of the div and the problem is sorted, so it is definitely the problem.

I cannot show illustration because i am a new user.

Does anyone know of some kind of workaround to fix this problem? Is this really a treeview bug?

Answer 1

check the following link: http://blogs.msdn.com/carloc/archive/2007/05/23/broken-line-in-asp-net-2-0-treeview-in-ie-7.aspx

Thank you Lyon!

ps. "{height: 20px !important}" -- the height must be the exact same size as your treeview item content.

the following also works well:
 .treefix td {
       vertical-align:top !important;

  }