[flexcoders] Image artifact

[Richard Rodseth]

I'm trying to do a HDividedBox where one of the segments is collapsible. But
in the open state, an artifact of the expand icon image appears at top left
even though its container is invisible in that state, and it's normal
position is halfway down the screen.
Code is something like the following.
Note that the expand icon is outside the HDvidedBox, and the collapse icon
is inside.
Any ideas?

    <mx:HBox width="100%" height="100%" borderStyle="solid">

        <mx:VBox  visible="{!(model.navigatorShown)}}"
includeInLayout="{!(model.navigatorShown)}" height="100%" >
            <mx:Spacer height="100%"/>
            <mx:Image id="leftGrip"

                      width="16" height="16"
click="leftGrip_clickHandler(event)"
source="@Embed('/assets/images/icon_open_right.png')"/>

            <mx:Spacer height="100%"/>
        </mx:VBox>

        <mx:HDividedBox id="dividedBox" width="100%" height="100%">

            <mx:VBox width="200" height="100%"
visible="{model.navigatorShown}" includeInLayout="{model.navigatorShown}">

                <!-- navigator plus collapse icon -->
                <mx:HBox width="100%" height="100%" >

                    <mx:VBox width="100%" height="100%" borderStyle="solid"
>
                        <mx:Label text="Navigator"/>

                    </mx:VBox>

                    <mx:VBox  visible="{model.navigatorShown}}"
includeInLayout="{model.navigatorShown}" height="100%" >
                        <mx:Spacer height="100%"/>
                        <mx:Image id="rightGrip" width="16" height="16"
click="rightGrip_clickHandler(event)"
source="@Embed('/assets/images/icon_close_left.png')"/>
                         <mx:Spacer height="100%"/>
                    </mx:VBox>

                </mx:HBox>

            </mx:VBox>

            <mx:VBox width="80%" height="100%" borderStyle="solid">
                <mx:Label text="RHS"/>
            </mx:VBox>

        </mx:HDividedBox>

    </mx:HBox>