List skinning being applied to list items in Flex 3

While trying to skin a List control with a JPG in Flex Builder 3, I ran across an odd problem. The skin was also being applied to the list items by default. My image was showing up not just on my list, but also on each item in that list, so I had lots of mini images on top of a larger image — a real mess. This happened despite my trying to name a separate style for the items.

A little background: The list items are wrapped in a Canvas within an MXML component separate from my main MXML. The MXML component is called by the itemRenderer property of the List control.

I made many attempts at different workarounds, including making the Canvas transparent, fooling around with different CSS properties, and even toyed with the less-than-sane idea of putting a static image behind my List control and doing away with the skin altogether. That wouldn’t have worked, because my List could grow beyond the image.

Finally I realized that the problem was with the CSS itself. I had used the design view of the CSS file to generate a skin for my List control. The CSS put the image on the borderSkin. Rather than question this auto-generated CSS (!), I wracked my brains for a couple hours trying to “fix” things. After all that, I went back to studying the CSS, which looked like this:

List.myStyleName
{
borderSkin: Embed(source=”my_image_file.png”);
}

I changed the line above to read:

background-image: Embed(source=”my_image_file.png”);

And that simple step took care of my problem.

Why would the CSS generator create a “borderSkin” instead of a “background-image” by default? Also, why is the borderSkin automatically rendered on both the List and its sub-items? Questions for the Adobe team I guess…