prevent li having an image 1

[litton1]

Hi all,

My content li has an image.
#content li {
list-style-type: none;
background: url(img/bullet.gif) no-repeat 0px 8px;
etc ...
}

How do I make an li below this id not have this image. I could make a new id/class but what is the syntax to cancel the image?

Thanks.

Age is a consequence of experience

 

[darryncooke]

.class {
	background-image: none;
}

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[litton1]

Thank you!

Age is a consequence of experience

 

[litton1]

Sorry but that didn't seem to work?

tried background-image: none; and background: none;

.content_no_li_image li {
background: none;
}

http://oakhowelettings.com/tenants.html

Age is a consequence of experience

 

[darryncooke]

you only need to create the class

.noimage {
	background-image: none;
}

then you apply it as such

<ul>
<li></li>
<li class="noimage"></li>
<li></li>
<li></li>
</ul>

your syntax

.content_no_li_image li {
background: none;
}

is looking for all "li" elements within a container with a class name "content_no_li_image" so not sure that will do what you are trying to do.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[litton1]

I do not want any of the li tags to have an image from this ul. but above this there is another ul that i want the li to have the bullet image?

Thanks for your time.


Age is a consequence of experience

 

[litton1]

background: none;
This did di it? IE must have cached the page.

Thanks


Age is a consequence of experience

 

[ChrisHunt]

I do not want any of the li tags to have an image from this ul. but above this there is another ul that i want the li to have the bullet image?

I suggest you apply a class to the ul, and write CSS code to control how it appears. Something like this:

My content li has an image.
ul.bullet li {
list-style-type: none;
background: url(img/bullet.gif) no-repeat 0px 8px;
etc ...
}

ul.nobullet li {
list-style-type: none;
background: none;
}

Then yor html would look like this:

<ul>
<li>Normal HTML bullets</li>
<li>Appear on this list</li>
</ul>
<ul class="bullet">
<li>Your custom image bullets</li>
<li>Appear on this list</li>
</ul>
<ul class="nobullet">
<li>No bullets at all</li>
<li>Appear on this list</li>
</ul>

If all your lists should have the custom bullet, apply the appropriate CSS to the plain [tt]ul li[/tt], and just have the class to identify the unbulletted list(s).

Having said all that - "bullet" and "nobullet" are bad names for CSS classes. It's better to name them for what the relevant lists represent than for how they are displayed. e.g. class="subjects", class="menu", class="tags" or whatever. That way, if you change your mind about how that list is displayed vis-a-vis bullets, your class name will remain sensible.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd