« Back to blog

Google Chrome II: The Revenge of Background-Position

I spent a good portion of this afternoon trying to track down a bizarre issue with lists and Google Chrome (Safari also has a guest apperance in this little adventure). The design in question was using background-image and its bretheren to implement custom bullets. In Chrome and Safari, the image appeared twice in each list item. I tried all sorts of tricks to remove the interloper to no avail, including breaking up the background attribute into its component background- attributes at the list item level, and adding background-image: none to the unordered list level. Then I noticed this bit of code:

background-position: 0px, 10px;

Notice that comma? I didn't the first forty or so times I looked at the code. Removing that comma made the second instance of the image go away. If you're wondering ... yes, the more commas you add, the more times the image will appear. This, for instance, will make the image appear at 0px, 10px, 20px, 30px and 40px from the left edge of the list item:

background-position: 0px, 10px, 20px, 30px, 40px