1

I must be making a simple mistake (new to Flex). Here is main.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
                backgroundColor="#ff0000">
    <mx:Style source="/testing123.css"/>
    <mx:Canvas top="0" bottom="0" left="0" right="0" styleName="bg-lowlight" >
    </mx:Canvas>
</mx:Application>

and here is testing123.css:

.bg-lowlight

    {
        backgroundColor: #003366;
    }

The Canvas renders fine in design mode (a nice deep blue) but when I run the application (either in the browser or in the Flash Player) the frame is red (the color from the Application tag). If I specify the color for the Canvas directly, instead of through the styleName, it works as expected (blue canvas at runtime).

I'm using FlexBuilder3, and would much rather put colors in a .css file than on every Flex element!

Help!!!

*** Additional problem description ... has nothing to do with an external .css file. Even if I declare the CSS styles within the main.xml file, it still looks fine in Design mode and wrong when it runs. I am completely stymied.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#ff0000">
    <mx:Style > 
.bg-lowlight
{
    backgroundColor: #003366;
}
    </mx:Style>
    <mx:Canvas top="0" bottom="0" left="0" right="0" styleName="bg-lowlight" id="canvas1">
    </mx:Canvas>
</mx:Application>
Mark Laff
  • 417
  • 5
  • 17

2 Answers2

1

The active directory changes when you run the application, so "/testing123.css/" no longer refers to the correct file.

EDIT: It's actually REALLY annoying.

CookieOfFortune
  • 13,836
  • 8
  • 42
  • 58
  • I couldn't figure out the correct source= value to for the mx:Style tag, so I looked in the bin-debug folder...and the .css file isn't there! I assumed it would have been copied to the bin folder. How can I get that to happen (or include in the .swf)? – Mark Laff Jun 15 '09 at 19:12
  • Thanks for the advice...but I modified the original example to switch to internal instead of external .CSS definitions, and the file still looks great in design time but wrong when it runs. – Mark Laff Jun 15 '09 at 19:23
  • is it running a cached version? – CookieOfFortune Jun 15 '09 at 20:26
  • I have IE set to "Check for newer version of stored pages - Every time I visit the webpage". That should force re-fetch of the page, right? – Mark Laff Jun 15 '09 at 20:29
  • Not certain, since the html would still be the same. – CookieOfFortune Jun 15 '09 at 20:54
  • Yet another problem with my original...the class name had a '-' in it (bg-lowlight). No warnings, looks fine in Design mode...but doesn't work. I think that may have been the root of the problem. Removing the '-' from the class name seems to do the trick. – Mark Laff Jun 15 '09 at 21:55
0

So...with CookieOfFortune's help I tracked down the root of the problem:

  • the CSS class name (bg-lowlight) was invalid. The '-' is not allowed

that's what happens, I guess, when you guess at what is logical!

Mark Laff
  • 417
  • 5
  • 17