Hi,
I need to re-open a topic from last week.
I know this should not be possible, but the same Flex code, with the same
images and same positioning, has positioned elements differently in
different browsers.
In the code below, a TabNavigator is created within a Canvas. It sits on top
of a background image, which includes a horizontal bar. The tabs should fit
within the horizontal bar. At least, that's the idea. However, the vertical
positioning of the tabs is different in Firefox, Safari and IE (6 and 7).
I've attached screenshots showing the differences.
The relevant code is:
<mx:Image source="@Embed(source='assets/images/logo.png')" id="logo"
x="15" y="10" />
<mx:TabNavigator id="mainTabs" change="setDefaultViews(event)"
width="100%" height="100%"
x="5" y="111" backgroundAlpha="0.0" borderThickness="0" >
<views:SummaryView id="summaryMain" width="100%" height="100%"
label="Summary" />
<views:CaseView id="caseMain" width="100%" height="100%"
label="Cases" />
<views:PeopleView id="peopleMain" width="100%" height="100%"
label="People/Organizations" />
<views:ReportView id="reportMain" width="100%" height="100%"
label="Reports" />
<views:DBAdminView id="dbAdminMain" width="100%" height="100%"
label="Database Admin" />
</mx:TabNavigator>
The CSS for the Application contains:
Application {
color: #081263;
backgroundColor:#9bc8f2;
background-repeat:repeat-x;
background-image: Embed(source='assets/images/bg.png');
}
I've also attached the actual background png.
Has anyone seen anything like this, or have any ideas how to correct it?
--
Thanks,
Tom
Tom McNeer
MediumCool
http://www.mediumcool.com
1735 Johnson Road NE
Atlanta, GA 30306
404.589.0560
