CSS repeat-x results in unwanted white border on top and left when using two backgrounds

I've been tearing my hair apart trying to accomplish this fairly trivial task.
Here's the css code:

    <mx:Style>
        .contentPanelsContainers{
                border-color: "#001144";
                background-image: contentPanelsContainerBackground,
contentPanelsContainerBackgroundTop;
                border-width:"0px 0px 0px 0px";
                background-repeat: repeat, repeat-x;
                background-position:top;
                asset-class:ClassReference("assets.MainNavigationAssets");
                borderSkin: ClassReference("com.degrafa.skins.CSSSkin");
        }
    </mx:Style>

and here is the asset class:

package assets
{
    public class MainNavigationAssets
    {

        [Embed("/assets/content_panels_container_background.png")]
        public static const contentPanelsContainerBackground:Class;

        [Embed("/assets/content_panels_container_background_top.png")]
        public static const contentPanelsContainerBackgroundTop:Class;

    }
}

Basically, I'm trying to apply two backgrounds on a VBox (I tried other
types of containers, same thing).

If I use only one background, repeat-x works fine. If I add another one
which repeats over the whole thing, I get two additional borders on top and
left, as you can see in the screenshot and I believe this is a serious bug
(also, see the assets I'm using)
I wish there would be something I'm missing or a workaround for this. 

We're planning to use Degrafa heavily in our next set of features and my
first contact is rather disappointing in terms of making complex stuff easy
by using Degrafa :(

Also, I would be glad to be part of the project (to help testing,
troubleshooting and so on)

Emil

Original issue reported on code.google.com by emilta...@gmail.com on 17 Nov 2008 at 12:04

Attachments:

Nezarov / degrafa

CSS repeat-x results in unwanted white border on top and left when using two backgrounds #63