FLEX: how can I remove this space ?

Question

hi,

how can I remove the space between my video and control bar... I tried to change margin and padding to all element without success. There is still a thin white space above the controls.

http://dl.dropbox.com/u/72686/hSliderMargin.png

thanks

<mx:VideoDisplay id="videoD" autoPlay="{autoPlayOption}" source="{videoPath}" playheadUpdate="playUpdate()" click="togglePlay()" />

    <mx:HBox width="{videoD.width}" styleName="controlsBar" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">

        <mx:Button id="playB" icon="{playImg}" width="8" height="14" click="togglePlay()"/>

        <mx:HSlider id="slider" minimum="0" maximum="{videoD.totalTime}"
                height="12"
                width="{videoD.width - 58} "
                dataTipPlacement="top" 
                allowTrackClick="true" 
                liveDragging="false"
                showTrackHighlight="true"  
                click="isDragging=true;"
                mouseUp="seek()"
                sliderThumbClass="BigThumbClass"
        />

        <mx:Button id="fullB" icon="{fullscreen}" width="10" height="17" click="fullScreen()"/>

        <mx:Button id="volumeB" icon="{volumeOn}" width="14" height="14" click="toggleVolume()"/>

    </mx:HBox>




/* CSS file */

global {
    backgroundColor: #FFFFFF;
    padding:0;
    margin:0;   
}

Button {

    fillAlphas: 1.0, 1.0, 1.0, 1.0;
    fillColors: #FFFFFF, #FFFFFF;
    themeColor: #FFFFFF;
    borderColor: #FFFFFF;
    cornerRadius: 0;
    paddingTop: 0;
    paddingLeft: 0;
    paddingRight: 0;
    paddingBottom: 0;
    horizontalGap: 0;
    leading: 0;
    fontWeight: normal;
    color: #000000;
    textSelectedColor: #000000;
    textRollOverColor: #000000;
    skin: ClassReference(null);
}

Application {

    backgroundColor: #FFFFFF;
    backgroundGradientAlphas: 1.0, 1.0;
    backgroundGradientColors: #FFFFFF, #FFFFFF;

}

HSlider {


    fillAlphas: 1.0, 1.0;
    fillColors: #C1C1C1, #C1C1C1, #717070, #717070;
    themeColor: #3C3C3C;
    thumbSkin: Embed(source="asset/thumb.png");
    thumbOffset: -1;



}

Answer 1

Is all this set in a VBox? adding vertical-gap : 2;

to a VBox style might fix this. also if you're using absolute height, adding clipContent = false to the box containing your slider might help too.