Grow your CSS skills. Land your dream job.

Faulty positioning in quirks mode

  • # November 18, 2009 at 10:18 am

    Hi,
    Heres what happens to my UI when i dont use the following
    i.e.

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    But my entire application does not work if i use this tag as it currently relies on ie6 quirks mode

    [img]http://i47.tinypic.com/52gy10.jpg[/img]

    Summarizing what is happening here,
    I expand "3" first but when i expand "2", 3 gets pushed down correctly, but its childs, get pushed down by double the amount.

    Heres a sample of my html

    My ULs are relatively positioned and the + and – images are backgroud images as opposed to list images.
    Here’s my css

    Code:
    div.default-treeview {
    position: relative;
    margin: 0px;
    width: 100%;
    }

    div.default-treeview ul {
    display: block;
    padding-left: 0;
    margin: 8px 0px 8px 8px;
    position: relative;
    list-style-position: inside;
    min-width: 370px;
    width: 94%;
    }

    div.default-treeview li ul {
    margin: 0 0 0 0;
    padding-bottom: 0;
    margin-top: 1px;
    min-width: 350px;
    width: 100%;
    }

    div.default-treeview li {
    display: list-item;
    padding: 0;
    padding-left: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    top: -1px;
    vertical-align: top;
    background: url( “../../images/tree/tree-bullet.png” ) 4px 5px no-repeat;
    list-style-image: none;
    list-style-type: none;
    position: relative;
    z-index: 1;
    cursor: pointer;

    }

    div.default-treeview li.top {
    background-position: 4px 5px !important;
    }

    div.default-treeview li.odd {
    background-color: #dfdfdf;
    }

    div.default-treeview li ul li {
    padding-left: 20px;
    background: url( “../../images/tree-bullet.png” ) 24px 5px no-repeat;
    }

    div.default-treeview li a {
    padding: 0px;
    position: relative;
    display: inline-block;
    top: -1px;
    left: 1px;
    border: 1px transparent solid;
    border: 1px #eee solid;
    text-decoration: none;
    color: #000;
    cursor: pointer;
    vertical-align: top;
    line-height: 18px;
    z-index: 0;
    }

    div.default-treeview li a:hover {
    text-decoration: none;
    }

    div.default-treeview li a.active {
    border-color: #666;
    background-color: #cdf;

    }

    div.default-treeview li.open {
    background: url( “../../images/minus_table.gif” ) 24px 4px no-repeat;
    list-style-type: none;
    list-style-image: none;
    }

    div.default-treeview li.open ul {
    display: block;
    }

    div.default-treeview li.last {
    margin-bottom: 0;
    }

    div.default-treeview li.closed {

    background: url( “../../images/plus_table.gif” ) 24px 4px no-repeat;
    list-style-type: none;
    list-style-image: none;
    }

    div.default-treeview li.closed ul {
    display: none;
    }

    div.default-treeview li div, ul.header li div {
    float: right;
    width: 250px;
    white-space: nowrap;
    }

    div.default-treeview li span {
    display: inline-block;
    padding-left: 20px;
    float: right;
    width: 116px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    }

    div.default-treeview li span.name {
    float: left;
    width: auto;
    padding-left: 6px;
    }

    How do you think i should fix this (apart from using list-style-image)

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".