SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member oxoleito's Avatar
    Join Date
    Sep 2013
    Location
    Moscow
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS list-style-image padding

    Hi. I had this problem and I solved it. But there was another problem (see pic in attachments). How to fix it? "list-style-position: outline" don't work in this instance. Big thx in advance!
    background-li.png

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    We would need to see your code to know what you are doing here, but there is no such thing as list-style-position: outline. It's actually list-style-position: outside. That may not help much if you are suing background images. which is why the code or a link would be better.

    If posting code, read this first:

    http://www.sitepoint.com/forums/show...Posting-Basics
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member oxoleito's Avatar
    Join Date
    Sep 2013
    Location
    Moscow
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    We would need to see your code to know what you are doing here, but there is no such thing as list-style-position: outline. It's actually list-style-position: outside. That may not help much if you are suing background images. which is why the code or a link would be better.

    If posting code, read this first:

    http://www.sitepoint.com/forums/show...Posting-Basics
    See attachment img
    background-li2.png

    ps I'm sorry for the mistake of "list-style-position: outside" (it doesn't work).

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Give the list items enough left padding to accommodate the background image.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member oxoleito's Avatar
    Join Date
    Sep 2013
    Location
    Moscow
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And how does that help? I don't understand.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Try it and see if it does anything. We are trying to debug an image here, which isn't a lot of use. If you could post an actual example of this it would be easy to tell you what to do. Often the bullets on a UL will be hidden unless the UL and/or LIs have some padding/margin on the left, to give them room to appear. But I'm still not very clear on what you are doing here.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Member oxoleito's Avatar
    Join Date
    Sep 2013
    Location
    Moscow
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Big sorry, I understood. List of inherited indent red string from a parent, that was the problem. Sorry for the carelessness and thank you!

    How can I thank the forum?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Glad you got it sorted.

    Quote Originally Posted by oxoleito View Post
    How can I thank the forum?
    You just did.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    As Ralph said, it would be nice to see the full code. But am taking a stab that you need to ad left-padding to your list item.

    Code:
    .ul_docs li {padding: 3px 0 3px (the width of your icon in px); }
    hope that helps

  10. #10
    SitePoint Member oxoleito's Avatar
    Join Date
    Sep 2013
    Location
    Moscow
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx, the problem is solved.


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
  •