External CSS loading problem

Question

This my hole code
AS3 code:
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("linkNewD.xml"));
var cssLoader:URLLoader = new URLLoader();
cssLoader.load(new URLRequest("style.css"));
cssLoader.addEventListener(Event.COMPLETE, onCSSFileLoaded);
function onCSSFileLoaded(event:Event):void
var st:StyleSheet = new StyleSheet(); 
st.parseCSS(cssLoader.data);  
trace(cssLoader.data);
myMc1.opt1txt.styleSheet =st;
When I am trace this (trace(cssLoader.data);) I got this css
".a {color: '#6a4100', text-decoration: 'none';}
.a:link { color: '#333333', textDecoration: 'none'; }
.a:hover {color: '#b30000', text-decoration: 'none';}"
but not Appling to the test field why?
xmlLoader.addEventListener(Event.COMPLETE, displayHTML);
function displayHTML(e:Event):void {
var xmlData:XML = new XML(e.target.data);
myMc1.opt1txt.htmlText = xmlData.Header1.option.*;
External CSS code:
.a {color: '#6a4100', text-decoration: 'none';}
.a:link { color: '#333333', textDecoration: 'none'; }
.a:hover {color: '#b30000', text-decoration: 'none';}
XML code:
<data>
<Header1>
<title>Title one</title>
<option>
  <![CDATA[<b>Option Title</b><br>]]>
  <![CDATA[<a href="http://www.google.com">Google Search</a><br>]]>
  <![CDATA[<a href="http://www.yahoo.com">Yahoo Search</a><br>]]>
  <![CDATA[<a href="http://www.bing.com">Bing search</a>]]>
</option>
</Header1>
</data>
Please help me!
Thanks,
jafy

Answer 1

Hi jafy,
Please make your textfield dynamically using as3. Now your CSS is correct but you created the textfield by manual… it’s automatically add styles and other html code on textfield
While I was using manually crated textfield… I trace the html text content from textfield it was showing like:
<TEXTFORMAT LEADING="2">
     <P ALIGN="CENTER"> <FONT FACE="Arial" SIZE="16" COLOR="#000000" LETTERSPACING="0" KERNING="0"><B>Option Title</B></FONT> </P>
</TEXTFORMAT>
<TEXTFORMAT LEADING="2">
     <P ALIGN="CENTER"> <FONT FACE="Arial" SIZE="16" COLOR="#000000" LETTERSPACING="0" KERNING="0"> Google Search</FONT> </P>
</TEXTFORMAT>
<TEXTFORMAT LEADING="2">
     <P ALIGN="CENTER"> <FONT FACE="Arial" SIZE="16" COLOR="#000000" LETTERSPACING="0" KERNING="0"> <A HREF="http://www.google.com" TARGET="">Google Search</A> </FONT> </P>
</TEXTFORMAT>
<TEXTFORMAT LEADING="2">
     <P ALIGN="CENTER"><FONT FACE="Arial" SIZE="16" COLOR="#000000" LETTERSPACING="0" KERNING="0"> <A HREF="http://www.yahoo.com" TARGET="">Yahoo Search</A></FONT></P>
</TEXTFORMAT>
<TEXTFORMAT LEADING="2">
     <P ALIGN="CENTER"><FONT FACE="Arial" SIZE="16" COLOR="#000000" LETTERSPACING="0" KERNING="0"> <A HREF="http://www.bing.com" TARGET="">Bing search</A></FONT></P>
</TEXTFORMAT>
Now I rewrite your as3 code and added that here:
var cssLoader:URLLoader = new URLLoader();
cssLoader.load(new URLRequest("style.css"));
cssLoader.addEventListener(Event.COMPLETE, onCSSFileLoaded);
function onCSSFileLoaded(event:Event):void {
    var st:StyleSheet = new StyleSheet();
    st.parseCSS(cssLoader.data);
    var xmlLoader:URLLoader = new URLLoader();
    xmlLoader.load(new URLRequest("linkNewD.xml"));
    var opt1txt:TextField = new TextField();
    opt1txt.styleSheet=st;
    myMc1.addChild(opt1txt);
    xmlLoader.addEventListener(Event.COMPLETE, displayHTML);
    function displayHTML(e:Event):void {
        var xmlData:XML=new XML(e.target.data);
        opt1txt.htmlText=xmlData.Header1.option.*;
        //trace(myMc1.opt1txt.htmlText);
        opt1txt.autoSize = TextFieldAutoSize.LEFT;
CSS Code:
p{font-size: 25px; color:#ffcc00;}
a {color: #6a4100; text-decoration:none;}
a:link { color:#333333; text-decoration:none; }
a:hover {color:#ff0000; text-decoration:none;}
Regards,
Finoy Francis.
http://flashprolabs.com