- This topic is empty.
-
AuthorPosts
-
November 18, 2009 at 10:18 am #26815nerrveMember
Hi,
Heres what happens to my UI when i dont use the following
i.e.Code: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
Code:My ULs are relatively positioned and the + and – images are backgroud images as opposed to list images.
Here’s my cssCode: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)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.