SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The distance between list image and list text?

    I'm trying to use - list-style-image in my lists.

    I was curious, can I somehow controll the distance between list text and the image?
    Have Fun,
    Gator
    zknives.com

  2. #2
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes. I believe (not sure) that this is handled with the margin-left property.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've used
    li {list-style-image:url(knoby.gif);margin-left:10px;display:block;padding:0;}
    no effect. To be precise no desired effect, the marign-left affects the list item in whole including the image.
    I can move the image closer to the text specifying the listStylePosition:inside, but that's it. Not exactly controllable.
    Have Fun,
    Gator
    zknives.com

  4. #4
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe try padding-left?

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Same, which means no effect, actuaally I've tried that one before margin.
    Looks like we're out of luck
    Have Fun,
    Gator
    zknives.com

  6. #6
    SitePoint Addict Caterwomtious's Avatar
    Join Date
    Dec 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works for me, so don't give up! For example, on this page the list style is:

    ul.g_list {margin-left: 0px; margin-top:0px;}
    ul.g_list li {margin-left: 20px; padding-left: 18px; margin-top: 15px; margin-bottom: 0px; line-height: 1.2;list-style-image: url(/graphics/tiny_g.gif); vertical-align: top;}

    The margin-left on the <li> controls the space between the left of the image and the left margin of its table cell; the padding-left controls the space between the image and the text of the list item.

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Groove,
    Thanks for your help. It does as you said, except it can't reduce the distance below some value. I can increase it using padding-left, but can't decrease, looks like 10-12 px is the minimum. I've tried to use list-style-position:inside, but then list items get indented and I can't remove that indent, even though all margin/padding is zero. Interesting problem. I've tried to use position:inside, because then the distance between the image and list item is 0, and apply padding or margin property to the list image, but that didin't work either. In the worst case I guess one could create an image of the proper size to control the distance, but it's gonna be too fixed.
    Have Fun,
    Gator
    zknives.com

  8. #8
    SitePoint Addict Caterwomtious's Avatar
    Join Date
    Dec 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm. Maybe you should have a play with the text-indent property as well. I've never used it with a list, but I have used it and found it to be supported with IE5.5+ (it was on an intranet, so I didn't try other browsers).


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
  •