Background image in LI not showing up - class

Question

I'm wanting to put a background image from a class as a list item:
<ul>
<li> Stuff </li>
<li> More Stuff </li>
<li class= "horizdotted" </li>
</ul>
Here's the CSS
.horizdotted {
background-image: url("images/horizdotted.png");
background-repeat:no-repeat;}
This doesn't work in any browser...it appears I have to have at least some info (other than a background image) in the LI. So, I made a png of a white pixel and tried another way:
<ul>
<li> Stuff </li>
<li> More Stuff </li>
<li class= "horizdotted"><img src="images/pixel.png" alt="teeny pixel" /> </li>
</ul>
Same CSS. This worked in Chrome and Firefox, but not in IE. I can't, for the LIFE of me, get it to work in IE. Please help if you can!! Here's an image in Chrome of the second way (with the teeny pixel).
[Stuff, more stuff, dotted line in unordered list] http://www.flickr.com/photos/77703125#N07/8321020892/in/photostream/

Answer 1

set width and height in css
.horizdotted {
background-image: url("images/horizdotted.png");
background-repeat:no-repeat;
width:50px;
height:50px;
}
set this property according to your image size, that you want.

Answer 2

jsFiddle for IE
You need to add content into your li so that it has something to show. Also, you have a syntax error for li in your Question. It is missing a closing bracket > symbol. You also have a blank space after the equal sign for class name too.
HTML:
<ul>
<li> Stuff </li>
<li> More Stuff </li>
<li class="horizdotted">Some stuff to view background.</li>
</ul>
CSS:
.horizdotted {
background-image:url(http://placehold.it/500x17/00ff00);
background-repeat: no-repeat;
}
jsFiddle for IE: No CSS
Also, since it's just a dashed line you want to show, then no CSS is necessary:
HTML:
<ul>
<li> Stuff </li>
<li> More Stuff </li>
<li>-----------------</li>
</ul>