FireFox 3 Background Image Not Rendering!

So why can't I see my background image in FireFox?

I am coding away prototyping some new components for a redesign and I am coding a list of links (for the footer) that has a nice, blue triangle preceding each link. Typically how I handle this is I add padding to the left of the <a> tag and set a non-repeating background image to that tag.

So the HTML mark-up is pretty simple:

<div class="FooterDiv">
 ...
 <div class="footerColumnDiv">
  <h3>Support</h3>
  <ul>
   <li><a href="#">Security Center</a></li>
   <li><a href="#">Help/FAQs</a></li>
  </ul>
 </div>
 ...
</div>

And here is the associated CSS:

.FooterDiv ul,
.FooterDiv li {
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}

.FooterDiv li a{
 font: bold 12px Arial;
 color: #069;
 text-decoration: none;
 padding-left: 15px;
 background: transparent url(otherImages/blueArrow.gif) scroll no-repeat  2px left;
}

The above works as intended in other browsers (IE7, Safari 3) but it doesn't work on FireFox 3 (on either the MAC or Windows). Hmmmm.

FireFox 3 doesn't like mixed marriages

It turns out that FireFox 3 doesn't like it when you mix property value types when setting the background-position in CSS. so you can't have 2px left when setting the position of a background image.

Either of the following did work for FireFox 3:

.FooterDiv li a{
 font: bold 12px Arial;
 color: #069;
 text-decoration: none;
 padding-left: 15px;
 background: transparent url(otherImages/blueArrow.gif) scroll no-repeat   left center;
}

-or-

.FooterDiv li a{
 font: bold 12px Arial;
 color: #069;
 text-decoration: none;
 padding-left: 15px;
 background: transparent url(otherImages/blueArrow.gif) scroll no-repeat  0px 2px;
}

Maybe if I coded it right to begin with...

I though I did according to the CSS 4.01 Spec.

When I originally set the 2px left; for the position, FireFox 3 did not like the fact that I tried to put the horizontal position setting where it wants the vertical position setting, and visa-versa. It should have been (according to FireFox 3) written as: left 2px;

So the following also works:

.FooterDiv li a{
 font: bold 12px Arial;
 color: #069;
 text-decoration: none;
 padding-left: 15px;
 background: transparent url(otherImages/blueArrow.gif) scroll no-repeat  left 2px;
}

All the other browsers I tested this in seemed fine with this.