Can't get rid of list-style-image

[RetroNetro]

Hello

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

   #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.

<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.

#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

[vgarcia]

Have you tried:

#post-categories {
list-style: none;
}

[RetroNetro]

Hello

Well I had tried it with:

.post-categories {
list-style: none;
}

as well as:

#leftColumnIn.post-categories{list-style: none;}

Then I tried:

#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

[dartcol]

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?

[RetroNetro]

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:

   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

[Paul O'B]

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.

#leftColumnIn div.meta li {background:#fff}

Note that you also had this:

#leftColumnIn.meta li

which would only apply if the structure was like this:

<div id="leftColumnIn" class="meta">

Paul

[dartcol]

So just by specifying the li pseudo selector as white it blanks the image?

[Paul O'B]

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

[RetroNetro]

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