Question

I’m not that good at debugging IE, because… well because I hate it and want nothing to do with it >_<

Anyway… I’m creating this treeview plugin and everything looks great…

But, for some reason, it looks totally messed up in IE7, and IE7 only (don’t know about IE6 etc, but seriously, screw that piece of #%/”#).

.

Does anyone know how to fix it or why it’s behaving this way?

Here’s the generated html & css example

---

CSS

body{
    margin: 0px;
    padding: 0px;
}

.vbc-treeview{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    padding-left: 10px;
    padding-top: 0px;
    overflow: auto;

    width: 200px;
    height: 200px;

    border: 1px solid #828790;
    margin: 5px;

}

.vbc-treeview ul{
    list-style-type: none;
    margin: 0px;
    margin-left: 20px;
    margin-top: 0px;
    padding: 0px;
    position: relative;
}

.vbc-treeview ul:first-child{
    margin-left: 10px;
}

.vbc-treeview li{
    position: relative;
}

.vbc-treeview li:first-child{
    padding-top: 0px !important;
}

.vbc-treeview li a{
    text-decoration: none;
    color: black;
    display: block;
    cursor: default;
    line-height: 16px;
}

.vbc-treeview .tv-sibling{
    position: absolute;
    background-color: transparent;
    background: url(http://img813.imageshack.us/img813/1664/connector.png);
}

.vbc-treeview .tv-sibling-horizontal{
    left: -12px;
    top: 8px;
    background-repeat: repeat-x;
    height: 1px;
    width: 8px;
    z-index: 0;
}

.vbc-treeview .tv-sibling-vertical{
    left: -14px;
    top: 0px;
    background-repeat: repeat-y;
    height: 100%;
    width: 1px;
    z-index: 0;
}

.vbc-treeview .tv-sibling-first{
    top: 8px;
}

.vbc-treeview .tv-collapse{
    position: absolute;
    background: url(http://img825.imageshack.us/img825/2134/collapser.png) no-repeat center;
    width: 9px;
    height: 9px;
    left: -18px;
    top: 4px;
    z-index: 1;
}

.vbc-treeview .tv-expanded{
    background-position: 0px 0px;
}

.vbc-treeview .tv-collapsed{
    background-position: -10px 0px;
}

---

HTML

<div class="tree vbc-treeview">
    <ul>
        <div class="tv-sibling tv-sibling-vertical tv-sibling-first" style="height: 609px;"></div>
        <li class="tv-expanded">
            <div class="tv-collapse tv-expanded"></div>
            <div class="tv-sibling tv-sibling-horizontal"></div>
            <a href="#">Node 0,2</a>
            <ul>
                <div class="tv-sibling tv-sibling-vertical" style="height: 41px;"></div>
                <li>
                    <div class="tv-sibling tv-sibling-horizontal"></div>
                    <a href="#">Node 0,2,0</a>
                </li>
                <li>
                    <div class="tv-sibling tv-sibling-horizontal"></div>
                    <a href="#">Node 0,2,1</a>
                </li>
                <li>
                    <div class="tv-sibling tv-sibling-horizontal"></div>
                    <a href="#">Node 0,2,2</a>
                </li>
            </ul>
        </li>
        <li class="tv-expanded">
            <div class="tv-collapse tv-expanded"></div>
            <div class="tv-sibling tv-sibling-horizontal"></div>
            <a href="#">Node0</a>
            <ul>
                <div class="tv-sibling tv-sibling-vertical" style="height: 249px;"></div>
                <li class="tv-expanded">
                    <div class="tv-collapse tv-expanded"></div>
                    <div class="tv-sibling tv-sibling-horizontal"></div>
                    <a href="#">Node 0,0</a>
                    <ul>
                        <div class="tv-sibling tv-sibling-vertical" style="height: 121px;"></div>
                        <li>
                            <div class="tv-sibling tv-sibling-horizontal"></div>
                            <a href="#">Node 0,0</a></li>
                        <li>
                            <div class="tv-sibling tv-sibling-horizontal"></div>
                            <a href="#">Node 0,1</a></li>
                        <li class="tv-expanded">
                            <div class="tv-collapse tv-expanded"></div>
                            <div class="tv-sibling tv-sibling-horizontal"></div>
                            <a href="#">Node 0,2</a>
                            <ul>
                                <div class="tv-sibling tv-sibling-vertical" style="height: 57px;"></div>
                                <li>
                                    <div class="tv-sibling tv-sibling-horizontal"></div>
                                    <a href="#">Node 0,2,0</a>
                                </li>
                                <li>
                                    <div class="tv-sibling tv-sibling-horizontal"></div>
                                    <a href="#">Node 0,2,1</a>
                                </li>
                                <li>
                                    <div class="tv-sibling tv-sibling-horizontal"></div>
                                    <a href="#">Node 0,2,2</a>
                                </li>
                                <li>
                                    <div class="tv-sibling tv-sibling-horizontal"></div>
                                    <a href="#">Node 0,2,3</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class="tv-sibling tv-sibling-horizontal"></div>
                            <a href="#">Node 0,3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="tv-sibling tv-sibling-horizontal"></div>
                    <a href="#">Node 0,1</a>
                </li>
                <li class="tv-expanded">
                    <div class="tv-collapse tv-expanded"></div>
                    <div class="tv-sibling tv-sibling-horizontal"></div>
                    <a href="#">Node 0,2</a>
                    <ul>
                        <div class="tv-sibling tv-sibling-vertical" style="height: 57px;"></div>
                        <li>
                            <div class="tv-sibling tv-sibling-horizontal"></div>
                            <a href="#">Node 0,2,0</a>
                        </li>
                        <li>
                            <div class="tv-sibling tv-sibling-horizontal"></div>
                            <a href="#">Node 0,2,1</a>
                        </li>
                        <li>
                            <div class="tv-sibling tv-sibling-horizontal"></div>
                            <a href="#">Node 0,2,2</a>
                        </li>
                        <li>
                            <div class="tv-sibling tv-sibling-horizontal"></div>
                            <a href="#">Node 0,2,3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="tv-sibling tv-sibling-horizontal"></div>
                    <a href="#">Node 0,3</a>
                </li>
            </ul>
        </li>
        <li class="tv-expanded"><div class="tv-collapse tv-expanded"></div><div class="tv-sibling tv-sibling-horizontal"></div>
            <a href="#">Node1</a>
            <ul><div class="tv-sibling tv-sibling-vertical" style="height: 25px;"></div>
                <li><div class="tv-sibling tv-sibling-horizontal"></div><a href="#">Node 1,0</a></li>
                <li><div class="tv-sibling tv-sibling-horizontal"></div><a href="#">Node 1,1</a></li>
            </ul>
        </li>
        <li>
            <div class="tv-sibling tv-sibling-horizontal"></div>
            <a href="#">Node2</a>
        </li>
        <li class="tv-expanded">
            <div class="tv-collapse tv-expanded"></div>
            <div class="tv-sibling tv-sibling-horizontal"></div>
            <a href="#">Node3</a>
            <ul>
                <div class="tv-sibling tv-sibling-vertical" style="height: 185px;"></div>
                <li>
                    <div class="tv-sibling tv-sibling-horizontal"></div>
                    <a href="#">Node 3,0</a>
                </li>
                <li>
                    <div class="tv-sibling tv-sibling-horizontal"></div>
                    <a href="#">Node 3,1</a>
                </li>
                <li class="tv-expanded">
                    <div class="tv-collapse tv-expanded"></div>
                    <div class="tv-sibling tv-sibling-horizontal"></div>
                    <a href="#">Node 3,2</a>
                    <ul>
                        <div class="tv-sibling tv-sibling-vertical" style="height: 121px;"></div>
                        <li>
                            <div class="tv-sibling tv-sibling-horizontal"></div>
                            <a href="#">Node 3,2,0</a>
                        </li>
                        <li class="tv-expanded">
                            <div class="tv-collapse tv-expanded"></div>
                            <div class="tv-sibling tv-sibling-horizontal"></div>
                            <a href="#">Node 3,2,1</a>
                            <ul>
                                <div class="tv-sibling tv-sibling-vertical" style="height: 57px;"></div>
                                <li>
                                    <div class="tv-sibling tv-sibling-horizontal"></div>
                                    <a href="#">Node 3,2,1,0</a>
                                </li>
                                <li>
                                    <div class="tv-sibling tv-sibling-horizontal"></div>
                                    <a href="#">Node 3,2,1,1</a>
                                </li>
                                <li>
                                    <div class="tv-sibling tv-sibling-horizontal"></div>
                                    <a href="#">Node 3,2,1,2</a>
                                </li>
                                <li>
                                    <div class="tv-sibling tv-sibling-horizontal"></div>
                                    <a href="#">Node 3,2,1,3</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class="tv-sibling tv-sibling-horizontal"></div>
                            <a href="#">Node 3,2,2</a>
                        </li>
                        <li>
                            <div class="tv-sibling tv-sibling-horizontal"></div>
                            <a href="#">Node 3,2,3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="tv-sibling tv-sibling-horizontal"></div>
                    <a href="#">Node 3,3</a>
                </li>
            </ul>
        </li>
        <li>
            <div class="tv-sibling tv-sibling-horizontal"></div>
            <a href="#">Node4</a>
        </li>
    </ul>
</div>

Answer 1

Try adding position:relative on the parent div.