I am having many problems with sizing/alignment in Flex... I personally hate
using absolute settings, so I do most designs as a combination of VBoxes and
HBoxes, together with width/height percentages and spacers if necessary...

Here is one of my least frustrating examples... It aligns very nicely in Flex
Builder, but becomes unaligned in the browser window... It's two HBoxes in a
VBox, so they should appear stacked on top of each other, aligned... The
elements are all in the same order with the same width percentages... Does
anyone know why this [expletive] happens...? It's really starting to annoy
me...

<mx:HBox width="100%" verticalAlign="bottom" horizontalGap="0">
<mx:Label text="____________________________" width="23%"/>
<mxateField width="10%"/>
<mx:Spacer width="2%"/>
<mx:Label text="____________________________" width="23%"/>
<mxateField width="10%"/>
</mx:HBox>

<mx:HBox width="100%" verticalAlign="top" horizontalGap="0">
<mx:Label text="Inspector Signature" width="23%"/>
<mx:Label text="Date" width="10%" />
<mx:Spacer width="2%"/>
<mx:Label text="Report Acknowledged" width="23%"/>
<mx:Label text="Date" width="10%" />
</mx:HBox>

Hi,

I tried the code below and got everything laid out properly. Can you please
check if something else is missing.

<?xml version="1.0"?>
<!-- DataGrid control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:VBox width="100%">
<mx:HBox width="100%" verticalAlign="bottom" horizontalGap="0">
<mx:Label text="____________________________" width="23%"/>
<mxateField width="10%"/>
<mx:Spacer width="2%"/>
<mx:Label text="____________________________" width="23%"/>
<mxateField width="10%"/>
</mx:HBox>

<mx:HBox width="100%" verticalAlign="top" horizontalGap="0">
<mx:Label text="Inspector Signature" width="23%"/>
<mx:Label text="Date" width="10%" />
<mx:Spacer width="2%"/>
<mx:Label text="Report Acknowledged" width="23%"/>
<mx:Label text="Date" width="10%" />
</mx:HBox>
</mx:VBox>
</mx:Application>