Hey everyone, I used to hang out on this forum a lot and then I got a real job and ran out of time. Well, I'm back! And I have a problem. This one's driving me nuts. I am trying to use CSS and unorder lists to build a tree. I know this has been done a hundred times for sideways trees, like file explorer, but I am trying to build a centered tree. I am so close to having it right, but firefox is screwing with me. What I have so far works in IE and Opera, but not in Firefox. Although it just barely misses in firefox. Here is the page:
http://abassett.sassiedev.com/loctree/loctreetest.html
The layout is just a bunch of nested unordered lists. here is the css:
Code: Select all
#entireTree ul{
padding:1;
margin:0;
border:1px dotted green;
display:inline;
float:left;
}
#entireTree li{
list-style-type:none;
display:inline;
padding:1;
margin:1;
border:1px dashed red;
text-align:center;
float:left;
}
#entireTree{
width:auto;
text-align:center;
}
It's pretty simple, although it took me some time to get it all straightened out. but here I am. I have the red and green dashes in place so I can see what's going on. In IE and Opera, everything looks right. Each node of the tree is centered above it's children. In firefox, however, something is amiss. The root of the tree, "Entire Company" is centered, but the rest of the nodes are all left aligned. The centering of the root comes from the outer div, when I take the center out of the entireTree class, it moves to the right. The rest of the nodes, however, refuse to budge no matter what I do. I put text-align:center in everywhere, but It didn't help.
Has anyone seen this before? Is it a bug in firefox? I have been searching all over for anyone who's had a similar problem, but I haven't been able to find anything remotely similar. I am relatively new to CSS so I'm hoping someone more experienced has some tricks up their sleeves.
Thanks, MRM