SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Can't get rid of list-style-image

    Hello

    Ok I have this CSS so as to add a small arrow image as a bullet as well as some other things.

    Code:
       #leftColumnIn ul {position: relative; margin: 15px 0 20px 10px; padding: 0; list-style: none;}
        #leftColumnIn li {margin: 0 0 .2em 0; padding: 0 0 0 20px; line-height: 1.4em; color:#817d62; background: url(images/bullet.gif) no-repeat 0 5px;}
    Then I have this HTML that was pretty much generated by Wordpress.

    Code:
    <div id="leftColumn">
    <div id="leftColumnIn">
    <div class="meta">Filed under: 
    <ul class="post-categories">
    <li><a href="http://www.blog.cssbasics.com/index.php/archives/category/general/" title="View all posts in General">General</a></li>
    </ul>  Johnny Gulag @ 11:26 pm  <a href="http:somelink.com/">Edit This</a> </div>
    </div>
    </div>
    The arrow shows up here too but I don't want it there, however I do want it on any other list within the #leftColumnIn division

    I have tried everthing I can think of to get rid of it while leaving the others untouched but I cannot seem to do it.

    Code:
    #leftColumnIn.meta li, ul.post-meta li {list-style: none;}
    I have tried every combo of that that I can think of.

    Any ideas?

    Thanks
    Johnny

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Have you tried:
    Code:
    #post-categories {
    list-style: none;
    }

  3. #3
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Well I had tried it with:

    Code:
    .post-categories {
    list-style: none;
    }
    as well as:

    Code:
    #leftColumnIn.post-categories{list-style: none;}
    Then I tried:

    Code:
    #post-categories {
    list-style: none;
    }
    Though none of them work, normally I don't have these sort of problems but today ARRRRRGHHHHH

    Thanks for any help.

    Johnny

  4. #4
    SitePoint Member
    Join Date
    Apr 2003
    Location
    UK
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The <li> element is inheriting the leftColumnIn attributes as I'm sure you've realised. What I imagine you need to do is to provide a new <div> element for this one particular instance of lists but not include the background image. Does that make sense to you?
    Getting a few things off my chest at DIYArtCollective

  5. #5
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Thank you both for your help, but I decided to do it another way.

    If anyone cares, I changed my lists to ul class="myList" then changed this:

    Code:
       ul.myList {position: relative; margin: 15px 0 20px 10px; padding: 0; list-style: none;}
        .myList li {margin: 0 0 .2em 0; padding: 0 0 0 20px; line-height: 1.4em; color:#817d62; background: url(images/bullet.gif) no-repeat 0 5px;}
    It works

    Later
    Johnny

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I've only just come in so I may not be up to running speed yet But where is your list image? I can't see any list-image to switch off!

    I can see a background image that is called bullet.gif but I can't see any list-style image or are you referring to an image not listed in the code above?

    To turn the background image off for that div you just need to target it correctly.
    Code:
    #leftColumnIn div.meta li {background:#fff}
    Note that you also had this:
    Code:
    #leftColumnIn.meta li
    which would only apply if the structure was like this:
    Code:
    <div id="leftColumnIn" class="meta">


    Paul

  7. #7
    SitePoint Member
    Join Date
    Apr 2003
    Location
    UK
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So just by specifying the li pseudo selector as white it blanks the image?
    Getting a few things off my chest at DIYArtCollective

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    So just by specifying the li pseudo selector as white it blanks the image?
    Specifying the shorthand background resets any properties not specified in the shorthand to their default status. I suppose I could have turned the image off with background-image:none but I was feeling lazy

    Paul

  9. #9
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Thanks Paul

    I actually did mean the background image, I just called it list-style-image cause it was part of a list. My mistake

    Anyway it all seems to work now.

    Thanks all.

    Later
    Johnny


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
  •