Help With CSS List STyle Images

Hello,

I have a network of blogs using a customized theme. I like the theme a lot and have customized almost completely to my satisfaction. I am having one problem though.

I would like the categories and recent entries sections to have list images beside them, but can't get them to work. Here is the blog:

http://www.practicalebayselling.com

Here is the CSS for the sidebar:

#sidebar h2 {
	color: #000;
	font-size: 1.1em;
	font:Verdana, Arial, Helvetica, sans-serif;
	margin: 0 0 10px 0;
	padding: 5px 0 2px 0;
	width: 93%;
	border-bottom: 2px solid #000;
}

#sidebar p {
	margin: 5px 0 5px 0;
	padding: 0px;
}

#sidebar ul {
	margin: 0px;
	padding: 0px;
}


#sidebar ul a{
	text-decoration:none;
}

#sidebar li {
	list-style:none;
	margin: 0px;
	padding: 0 5px 0px 10px;
}

#sidebar li a, #sidebartop a {
	font-size: 11px;
}

#sidebar li a:hover {
background-color: #ffffff;
color: #262a42;
text-decoration: underline;}

#sidebartop a:hover {
background-color: #ffffff;
color: #262a42;
text-decoration: underline;
}

#sidebar a img {
	border: 0px;
}

#sidebar a:hover img {
	border: 0px;
}

#sidebar a:hover  {
background-color: #ffffff;
color: #000000;
text-decoration: underline;
}

Code (markup):

And here is the image I'd like beside each Category list:

http://www.practicalebayselling.com/wp-content/themes/3-column/images/folder.png

I don't want this image to be applied to every <li> tag. I just want it to apply to the <li> tags within the categories. I've tried making a class just for this, but couldn't get it to work.

Any help would be appreciated.

Kenny

 

ul.menublok li {
list-style-image: url(yourImage);
}


It works.

 

Yeah that should work. use this and adjust padding to allow for your image if needed. If you couldn't get the path to work make it server relative like below

#sidebar li {
	list-style-image: url(/images/folder.png);
	margin: 0px;
	padding: 0 5px 0px 10px;
}

Code (markup):

 

Actually, that won't work 100% cross-browser. Try setting the image as a background on the list item itself, and then use padding (or a text indent) to adjust the position of the list item's content to give room for the background image to show.