Image disposition in Flex web based apps - image

Question

I came upon a problem, or more of a bug, really. I have a business app programmed in Flex 4.1, and the compiled Flash object displays images within it differently on different browsers.
For example this page : http://www.maastrichtuniversity.nl/web/Main/ProspectiveStudents/HomepageNewPortalProspectiveStudents/ChooseYourProgramme/RequestBrochures.htm
If you select Bachelor's programmes on browsers like Chrome or Safari you will see that flags are aligned with the text (flags are positioned using x,y coordinates. If you do exactly the same on IE 8 or 9, you will see that all flags move a few pizels to the left, and start covering some of the labels.
Has anyone else came across this issue, and how to solve it? Here is the mxml code that is used to position flags.
<mx:Image x="241" y="65" width="15" height="10" source="en.jpg"/>
<mx:Image x="245" y="95" width="15" height="10" source="en.jpg"/>
<mx:Image x="230" y="111" width="15" height="10" source="en.jpg"/>
<mx:Image x="262" y="65" width="15" height="10" source="nl.jpg"/>
<mx:Image x="160" y="246" width="15" height="10" source="en.jpg"/>
<mx:Image x="335" y="260" width="15" height="10" source="en.jpg"/>
<mx:Image x="199" y="305" width="15" height="10" source="en.jpg"/>
<mx:Image x="182" y="246" width="15" height="10" source="nl.jpg"/>
<mx:Image x="169" y="275" width="15" height="10" source="nl.jpg"/>
<mx:Image x="199" y="290" width="15" height="10" source="nl.jpg"/>
<mx:Image x="152" y="124" width="15" height="10" source="en.jpg"/>
<mx:Image x="158" y="140" width="15" height="10" source="en.jpg"/>
<mx:Image x="129" y="154" width="15" height="10" source="en.jpg"/>
<mx:Image x="152" y="230" width="15" height="10" source="en.jpg"/>
<mx:Image x="173" y="124" width="15" height="10" source="nl.jpg"/>
<mx:Image x="162" y="170" width="15" height="10" source="nl.jpg"/>
<mx:Image x="232" y="185" width="15" height="10" source="nl.jpg"/>
<mx:Image x="166" y="200" width="15" height="10" source="nl.jpg"/>
<mx:Image x="285" y="215" width="15" height="10" source="nl.jpg"/>
<mx:Image x="312" y="80" width="15" height="10" source="nl.jpg"/>

Answer 1

This can be achieved in the following way :
<?xml version="1.0"?>
<!-- sparktextcontrols/TLFFloat.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
private function changeSelection(event:Event):void {
image1.float = event.currentTarget.selectedItem;
}
]]>
</fx:Script>
<s:HGroup>
<s:Label text="float for the image (default:none):"/>
<s:ComboBox id="cb1"
change="changeSelection(event)"
creationComplete="cb1.selectedIndex=0">
<s:ArrayCollection>
<fx:String>none</fx:String>
<fx:String>left</fx:String>
<fx:String>right</fx:String>
<fx:String>start</fx:String>
<fx:String>end</fx:String>
</s:ArrayCollection>
</s:ComboBox>
</s:HGroup>
<s:RichEditableText id="myRET1" width="300">
<s:textFlow>
<s:TextFlow columnWidth="290">
<s:p id="p1">Images in a flow are a good thing. For example, here is a float. <s:img id="image1" float="none" source="#Embed(source='../assets/bulldog.jpg')" paddingRight="10" paddingTop="10" paddingBottom="10" paddingLeft="10"></s:img>Don't you agree?
It should show on the left. If it doesn't show up on the left, then it is a bug. You can submit bugs at http://bugs.adobe.com/jira/. You can set how the float is positioned within
the paragraph by using the ComboBox below. You can select left, right, start, end, or none. This example does not use the clearFloats property. That is in a different example.</s:p>
</s:TextFlow>
</s:textFlow>
</s:RichEditableText>
</s:Application>