Using Different List Styles in Same CSS Stylesheet

Hello,

I'm using CSS lists to make a thumbnail gallery of sponsor's logos on my website.  In my stylesheet I have two definitions for unordered lists.  The first is for normal unordered lists and uses "bullet.gif" for the bullet:

ul {
  margin:0 0 1em;
  padding:0;
  list-style:none;
  }
ul li {
  background:url("images/bullet.gif") no-repeat 4px 50%;
  margin:0;
  padding:0 0 0 15px;
  }


Later on in the same stylesheet I have this which is for the thumbnail gallery:

.pg {
width: 610px;
list-style: none none;
}

.pg:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}

.pg li {
list-style: none none none;
display: inline;
}

.pg li a {
margin: 2px;
border: 1px solid #CCC;
padding: 4px;
position: relative;
float: left;
display: block;
width: 172px;
height: 88px;
}

.pg li a:hover {
font-size: 100%;
z-index: 2;
}

.pg li a img {
border: 0 none;
position: absolute;
width: 170px;
height: 86px;
}

.pg li a:hover img,.pg li a:active img,.pg li a:focus img {
width: 170px;
height: 86px;
border: 1px solid #DDD;
z-index: 1;
}

In the HTML for my thumbnail gallery I have the following:
<ul class="pg">
    <li><a href="http://www.link1.com"><img src="images/link1logo.jpg" alt="Link 1 alt text" /></a></li>
    <li><a href="http://www.link2.org"><img src="images/link2logo.jpg" alt="Link 2 alt text" /></a></li>
and so on and so on

This displays as expected (without the "bullet.gif") in Internet Explorer 6 and 7 as well as Safari, but Opera and Firefox shows a bullet.gif for each list item all in a consecutive horizontal row.  

 How can I tell Firefox to ignore the bullet.gif in pg class lists?

Thanks in advance for any help.Start Free Trial