SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    list-style-image property not working?

    Hi,

    Im having problems with bullets I have assigned to my lists

    I want one li to have a twitter icon as it is a link to a twitter page and the other li to have a facebook icon..

    i set both li's like the following:
    <ul>
    <li class="twittericon"><a href="#">FOLLOW US ON TWITTER</a></li>
    <li class="facebookicon"><a href="#">VISIT OUR FACEBOOK PAGE</a></li>
    </ul>

    you can visit the page in question and will notice the lists appear in the header and footer

    any help would be great..

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    list-style-image will be buggy in older browsers and you will get much better results by setting the images as Background images.

    To do that you would set the image on the "li" as no-repeat and then give a little left padding to keep the text off the image.

    Something like this -
    (of course you would want to target the "li" classes with the correct image)

    Code:
    #header ul, #footer ul {
        margin:30px 40px 0px 0px;
        float:right;
    }
    #header li, #footer li {
        display:inline;
        margin: 0px 10px 0px 0px;
        background: url(../images/Social_media_bullet.jpg) no-repeat;
        padding-left:25px;  
    }
    #header li a, #footer li a {
        font-size:10px;
        color:#fff;
        font-weight:bold;
        text-decoration:none;   
    }

  3. #3
    SitePoint Zealot huit's Avatar
    Join Date
    Nov 2009
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it is the the display:inline; on the li that removes the bullet images. Try using floats instead. I think it will let you keep your bullet images that way.

    Edit: I guess it's not quite a simple as that. There seems to be more repeated code affecting how this displays and I had to get rid of a lot of inherited styles (using Firebug) to get it to work using list-style-image. However, Rayzur has a pretty good suggestion there using background images instead. It would be much simpler than trying to overwrite all these inherited styles.

  4. #4
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you both, huit that seemed towork for me.. how do i get the the link text after the bullet to line up central?

    i have updated the page to show you my current issue..

    site exmple

  5. #5
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    when I used rayzur's solution it chopped off half the icon,

    im guessing I'd need to set the li to block and give it a height the equivilant of the icon's height?

  6. #6
    SitePoint Zealot huit's Avatar
    Join Date
    Nov 2009
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you need the icons that large? They would line up automatically if they were the same height as the text...

    hmm, when I need bullets to line up in a certain way I usually default to background images like in Rayzur's example because positioning bullets - other than the inside/outside value - simply doesn't work. ^^;; If I knew of a way I would most certainly tell you.

  7. #7
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I could resize them and see if that works, but I cant see the text aligning to the v-middle of the icon...


    Will try it and post back..

    thanks for the help

  8. #8
    SitePoint Zealot huit's Avatar
    Join Date
    Nov 2009
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried adding vertical-align to the nested <a> tags and it seems to work in FF/Firebug. Never thought to try this before but it might be the answer. (I'm going to do some more testing with this on my own later...)

    Try this out:

    Code CSS:
    #header li a, #footer li a {
    color:#FFFFFF;
    font-size:10px;
    font-weight:bold;
    padding:0 0 50px;
    text-decoration:none;
     
    vertical-align:130%; /* this might be the fix? */
    }

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Owz2004 View Post
    when I used rayzur's solution it chopped off half the icon,

    im guessing I'd need to set the li to block and give it a height the equivilant of the icon's height?
    Hi,
    Yes the BG image exceeded the height of the line-box when you were using display:inline on your list items. You will always get more control over your UL when you use block level list items/anchors.

    Working with the images that you have provided you could set the anchors at the same height and center your text vertically with line-height. You can always position your BG images also. I set them at no-repeat 0 50% in the code below but you will not see the BG image center vertically unless the anchor is taller than the image.

    It is always good to group your relevant styles together so you are not having to hunt them down to make changes. Your twitter & facebook li classes were at the bottom of your stylesheet and the UL styles were up top. Set your css up in the same manner as your html and code maintenance will be much easier for you.
    Code:
    /*------------ Header/Footer UL Styles ------------*/
    #header ul, 
    #footer ul {
        margin:30px 40px 0px 0px;
        float:right;
        list-style:none;
    }
    #footer ul {margin-top:10px;}/*was 20px*/
    
    #header li, 
    #footer li {
        float:left;
        margin: 0 10px 0 0;
    }
    #header li a, 
    #footer li a {
        float:left;
        height:36px;/*BG image height*/
        line-height:36px;/*center the text*/
        padding-left:46px;/*BG image width + 10px*/
        font-size:10px;
        color:#fff;
        font-weight:bold;
        text-decoration:none;
    }
    #header li a:hover, 
    #footer li a:hover {
        color:#c06431;    
    }
    li.twittericon {
        background:url(../images/twitter_icon.png) no-repeat 0 50%;
    }
    li.facebookicon {
        background:url(../images/facebook-icon.png) no-repeat 0 50%;
    }

  10. #10
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for that... it now works..

    so when u set the background of the icons to no-repeat 0 50% what is the 0 and 50% part doing?

    I have uploaded the amends and it looks great..

    I'm having issues with the layout in chrome tho.. Would you know why this might be the case, looking at my code?

  11. #11
    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)
    The 0 and 50&#37; are the positioning coordinates.

    It's saying start all the way on hte left (0) and then 50% down vertically (50%)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for that...



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
  •