SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    CA
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    issue with firebird/ie rendering of css list element

    Code:
    ul.familyTrees { margin-left: 0px;}
    ul.familyTrees li ul.familyTrees { margin-left: 0px;}
    in ie this aligns the list TEXT flush to the left of the parent box. But the list icons are nowhere to be seen

    in firebird it does nothing.
    Code:
    ul.familyTrees {padding-left: 0px;}
    ul.familyTrees li ul.familyTrees {padding-left: 0px;}
    in ie this does nothing

    in firebird it aligns the list TEXT flush to the left of the parent box but the list icons are nowhere to be seen. obviously this problem seems to work itself out in these two browsers because i can specify both directives and have the result be consistent. which one is right? how else can i do this with a consistent directive?

    I want to do something like this (below) where I control the indentation of the list image based on it's depth in the tree, only correctly.
    Code:
    <style>
    ul.familyTrees { padding-left: 3px; margin-left: 3px;}
    ul.familyTrees li ul.familyTrees { padding-left: 10px; margin-left: 10px;}
    
    ul li {list-style: circle outside; }
    li.family {font-size: 13px;}
    li.subFamily { list-style: square outside; font-size: 11px;}
    li.family a:link { font-size: 12px; color: #333333; font-weight: bold; text-decoration: none; }
    li.family a:visited { font-size: 13px; color: #333333; font-weight: bold; text-decoration: none; }
    
    li.subFamily a:link { font-size: 11px; color: #338833; text-decoration: none; font-weight: normal; }
    li.subFamily a:visited { font-size: 11px; color: #338833; text-decoration: none; font-weight: normal; }
    li.subFamily a:active { font-size: 11px; color: #338833; text-decoration: none; font-weight: normal; }
    
    li.family a:hover {text-decoration: underline; color: #333333; font-weight: bold; }
    li.subFamily a:hover { text-decoration: underline; color: #333333; font-weight: normal; }
    </style>
    
    <ul class='familyTrees'>
    <li class='family'>Family Name
        <ul class='familyTrees'>
    <li class='subFamily'>Sub Family Name</li>
    </ul></li>
    <li class='family'>Family 2 Name
    <ul class='familyTrees'>
    <li class='subFamily'>sub family 2 name</li>
    </ul></li>
    </ul>
    What gives?
    -ChaCha

  2. #2
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have to set the margin and padding for IE and Firebird to both get it. As for the bullets, try using list-style-position: inside.
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  3. #3
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    CA
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured that. Thanks for pointing out the list-style-position attribute. It worked perfect.
    -ChaCha


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •