SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    269
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    list-style-image not working - any ideas?

    Hi guys,

    Can anyone spot what I've done wrong.
    The menu displays fine cross browser but I just can't get the custom list image to show up.

    Strangely the list image shows up if I change
    .subnav li to li.subnav

    But then the menu becomes vertical instead of horizontal.

    Code CSS:
    ul.subnav {
        float: left;
    	padding:0px;
        margin:0px;
    	list-style-type:square;
    	list-style-image:url(images/bullet_w.gif);
    }
     
    .subnav li {
    display:inline;	
    margin:0px 25px 0px 0px;
    }
     
    .subnav a:link, .subnav a:visited {
    text-decoration:none;
    color:#DFEEF7;
    }
     
    .subnav a:hover {
    color:#fff;
    text-decoration:underline;
    }

    Any help would be greatly received! thanks in advance

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    If you float the list item instead of making it display:inline the list image should show.

    It won't work in ie6/7 though as they lose the image/marker if a list is floated.

    Therefore you would be better off using a background image on the list element instead (not the ul) of a list image which you will then have more control over.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    In order for list-style-image to work it has to be list-item display, display:inline; won't show it. You could place it as a background iamge though.

    IE6/7 automatically make floated items block level though, so use a bg image instead.

    Also, .subnav li targets <li> that has a PARENT class of "subnav"

    li.subnav targets a <li> that has a class "subnav"

    Post your HTML and we can ge this sorted-sounds ike your just targeting the wrong elements.

    Edit:

    Paul beat me to it
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    269
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys, thanks for your replies.

    It's strange as I've never experienced this issue before.
    However CSS menus aren't my strong point so it's likely I have done something quite stupid.

    The HTML is pretty basic.

    Just:

    <ul class="subnav">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    </ul>
    I need to use class rather than an ID as another menu operates on the same page with identical styling.

    Once again thanks for your help.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Try this out. I used background-image as the reason specified above.
    Code:
    ul.subnav {
        float: left;
        padding:0px;
        margin:0px;
        background-image:url(images/bullet_w.gif);
    }
     
    .subnav li {
    float:left;
    margin:0px 25px 0px 0px;
    }
     
    .subnav a:link, .subnav a:visited {
    text-decoration:none;
    color:#DFEEF7;
    }
     
    .subnav a:hover {
    color:#fff;
    text-decoration:underline;
    }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    269
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan,

    Thanks for your quick reply.

    Unfortunately the solution you've suggested above won't work for me as this would create a background image for the UL and not the individual list items.

    I've created something like the following based on yours and Paul's idea:
    ul.subnav {
    float: left;
    padding:0px;
    margin:0px;


    }

    .subnav li {
    display:inline;
    margin:0px 21px 0px 0px;
    background-image:url(images/bullet_w.gif);
    background-repeat:no-repeat;
    background-position:left;
    padding-left:14px;
    }
    It seems to work cross-browser as well. Thanks for the tip guys!

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ah yes I don't know what I was thinking . Sorry about tha tlol.
    Glad you found a fix .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •