SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast theOC's Avatar
    Join Date
    Sep 2006
    Location
    Newport Beach, CA
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple Icons in <li>

    Hi there,

    I would like to have a Win icon bullet for the first <li> and a Quicktime icon bullet for the second <li>.

    Does that make sense?

    I tried:

    win.li
    {
    list-style-image: url(../images/winbullet.gif);
    }

    quick.li
    {
    list-style-image: url(../images/quicktimebullet.gif);
    }


    with...

    <ul>
    <li class="win">Windows Media Player</li>
    <li class="quick">Quicktime Player</li>
    </ul>

    I've tried a couple of other things and not having any luck? What am I doing wrong??? I also tried a couple of different combinations with no luck either?

    Any guidance would be appreciated!

    Best,

    Mike

  2. #2
    SitePoint Addict Jamieharrop's Avatar
    Join Date
    Mar 2005
    Location
    West Yorkshire, UK
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this Mike:

    Code:
    li.win
    { 
    list-style-image: url(../images/winbullet.gif);
    }
    
    li.quick 
    { 
    list-style-image: url(../images/quicktimebullet.gif);
    }
    Regards,
    Jamie Harrop

  3. #3
    SitePoint Enthusiast theOC's Avatar
    Join Date
    Sep 2006
    Location
    Newport Beach, CA
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    here's exactly what I have...

    This is in the CSS file...


    ul
    {
    color: #333333;
    font-weight: normal;
    font-size: 10px;
    line-height: 125%;
    font-family: Verdana, Arial, sans-serif;
    text-decoration: none;
    }

    li.win
    {
    list-style-image: url(images/win_bullet.gif);
    }

    li.quick
    {
    list-style-image: url(images/quick_bullet.gif);
    }



    here's whats in the HTML file...

    <ul>
    <li class="win"><a href="Large.wmv">Windows Media (Cable, DSL)</a></li>
    <li class="win"><a href="Small.wmv">Windows Media (Dial-Up)</a></li>
    </ul>
    <ul>
    <li><a href="Large.wmv">Apple Quicktime (Cable, DSL)</a></li>
    <li><a href="Small.wmv">Apple Quicktime (Dial-Up)</a></li>
    </ul>


    I have a feeling I've gotten something backwards but, I'm not sure???

    M

  4. #4
    SitePoint Addict Jamieharrop's Avatar
    Join Date
    Mar 2005
    Location
    West Yorkshire, UK
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just tested that code Mike, and it works perfectly.

    Are you sure you are specifying the correct URL to the images?
    Regards,
    Jamie Harrop

  5. #5
    SitePoint Enthusiast theOC's Avatar
    Join Date
    Sep 2006
    Location
    Newport Beach, CA
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I put the images in the root directory just to be sure and they are still not showing up???

  6. #6
    SitePoint Addict Jamieharrop's Avatar
    Join Date
    Mar 2005
    Location
    West Yorkshire, UK
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Humm. Very strange Mike.

    Maybe your images are corrupt, or maybe there is something else in the HTML or CSS that is causing the problem. Is there any other HTML or CSS besides the code you posted above?

    Also, what browser are you using? I tried IE6 and Opera9, and it worked without a problem. I copy and pasted the code from your post, and changed the image URL's to correspond to an image on my local machine, and it worked a treat.
    Regards,
    Jamie Harrop

  7. #7
    SitePoint Enthusiast theOC's Avatar
    Join Date
    Sep 2006
    Location
    Newport Beach, CA
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my style sheet...


    .home {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    padding: 5px 2px 10px 0px;
    color: #666666;
    }

    .home a:link {text-decoration: underline}
    .home a:visited {text-decoration: underline}
    .home a:active {text-decoration: underline}
    .home a:hover {text-decoration: underline; color: #000000;}

    a:link { color: #0589c6; text-decoration: underline}
    a:visited { color: #0589c6; text-decoration: underline}
    a:hover { color: #8edbff; text-decoration: none }

    p {
    text-align: justify;
    font-size: 12px;
    /*padding: 0px 0px 0px 3px;*/
    color: #666666;
    line-height: 125%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }

    h2 {
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    margin-bottom: -18px;
    align: left;
    color: #9a8007;
    }

    h3 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    padding-top: 3px;
    font-weight: bold;
    margin-bottom: -8px;
    align: left;
    color: #999999;
    }


    ul
    {
    color: #333333;
    font-weight: normal;
    font-size: 10px;
    line-height: 125%;
    font-family: Verdana, Arial, sans-serif;
    text-decoration: none;
    }

    li.win
    {
    list-style-image: url(win_bullet.gif);
    }

    li.quicktime
    {
    list-style-image: url(quick_bullet.gif);
    }



    here is the code in my page...

    <ul>
    <li class="win"><a href="Large.wmv">Windows Media: <br />
    (Cable, DSL)</a></li>
    <li class="win"><a href="Small.wmv">Windows Media: <br />
    (Dial-Up)</a></li>
    </ul>
    <ul>
    <li class="quicktime"><a href="Large.wmv">Apple Quicktime: <br />
    (Cable, DSL)</a></li>
    <li class="quicktime"><a href="Small.wmv">Apple Quicktime: <br />
    (Dial-Up)</a></li>
    </ul>

  8. #8
    SitePoint Addict Jamieharrop's Avatar
    Join Date
    Mar 2005
    Location
    West Yorkshire, UK
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That code is working perfectly for me Mike.

    Here is all the code I have in the page:

    Code:
    <html>
    <head>
    <title>Test</title>
    <style type="text/css">
    .home {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    padding: 5px 2px 10px 0px;
    color: #666666;
    }
    
    .home a:link {text-decoration: underline}
    .home a:visited {text-decoration: underline}
    .home a:active {text-decoration: underline}
    .home a:hover {text-decoration: underline; color: #000000;}
    
    a:link { color: #0589c6; text-decoration: underline}
    a:visited { color: #0589c6; text-decoration: underline}
    a:hover { color: #8edbff; text-decoration: none }
    
    p {
    text-align: justify;
    font-size: 12px;
    /*padding: 0px 0px 0px 3px;*/
    color: #666666;
    line-height: 125%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    h2 {
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    margin-bottom: -18px;
    align: left;
    color: #9a8007;
    }
    
    h3 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    padding-top: 3px;
    font-weight: bold;
    margin-bottom: -8px;
    align: left;
    color: #999999;
    }
    
    
    ul
    {
    color: #333333;
    font-weight: normal;
    font-size: 10px;
    line-height: 125%;
    font-family: Verdana, Arial, sans-serif;
    text-decoration: none;
    }
    
    li.win
    {
    list-style-image: url(win_bullet.gif);
    }
    
    li.quicktime
    {
    list-style-image: url(quick_bullet.gif);
    }
    </style>
    </head>
    
    <body>
    
    <ul>
    <li class="win"><a href="Large.wmv">Windows Media: <br />
    (Cable, DSL)</a></li>
    <li class="win"><a href="Small.wmv">Windows Media: <br />
    (Dial-Up)</a></li>
    </ul>
    <ul>
    <li class="quicktime"><a href="Large.wmv">Apple Quicktime: <br />
    (Cable, DSL)</a></li>
    <li class="quicktime"><a href="Small.wmv">Apple Quicktime: <br />
    (Dial-Up)</a></li>
    </ul>
    
    </body>
    </html>
    Could you try saving that as a new file and uploading it to the same folder as your current page. We should then be able to narrow it down to a problem with your image or not.
    Regards,
    Jamie Harrop

  9. #9
    SitePoint Enthusiast theOC's Avatar
    Join Date
    Sep 2006
    Location
    Newport Beach, CA
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a lesson for ALL... when you are having an issue, start with the basics! I just realized what the problem was! My images paths were off by a directory!!!!!!

    I'm so sorry for dragging you through this Jamie!

    Aaaargghhh!!!

    I think Sitepoint may revoke my posting priveledges after this one!

    Best,

    Mike

  10. #10
    SitePoint Addict Jamieharrop's Avatar
    Join Date
    Mar 2005
    Location
    West Yorkshire, UK
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haha. I knew it would be something simple.

    Not a problem Mike. I'm glad you got it sorted. Just remember you owe me a beer.
    Regards,
    Jamie Harrop

  11. #11
    SitePoint Enthusiast theOC's Avatar
    Join Date
    Sep 2006
    Location
    Newport Beach, CA
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I owe you a case!


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
  •