I'm using hyperlink in ext:Panel, it seems that i can not change the style of the hyperlink.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="Server">
 <style type="text/css">
  a.topbaruserinfo, a.topbaruserinfo:link, a.topbaruserinfo:visited
  {
   text-decoration:none; color: #FFF;
  }


  a.topbaruserinfo:hover
  {
   text-decoration:underline;
  }
 </style>
</head>
<body>
 <form id="form1" runat="server">
  <ext:ResourceManager ID="ResourceManager1" runat="server">
  </ext:ResourceManager>
  <ext:Viewport ID="Viewport1" runat="server">
   <Items>
    <ext:BorderLayout ID="BorderLayout1" runat="server">
     <North>
      <ext:Panel ID="PanelNorth" runat="server" Header="false"  Height="38" PreventBodyReset="true" ContentEl="headerDiv">
      </ext:Panel>
     </North>
     <Center>
      <ext:TabPanel ID="Pages" runat="server" EnableTabScroll="true" Plain="true" >
       <Items>
        <ext:Panel runat="server" Title="Home" Padding="5" >
         <Content>
          <h1>Content</h1>
         </Content>
        </ext:Panel>
       </Items>
      </ext:TabPanel>
     </Center>
    </ext:BorderLayout>
   </Items>
  </ext:Viewport>
  <div id="headerDiv" style="border: 0 none; background: #1E4176 url(../images/hd-bg.gif) repeat-x 0 0; height: 36px;">
   <div style="float:right; color:#FFF; padding-top:8px; padding-right:8px;">
    <a href="#" class='topbaruserinfo' >Logout</a>
   

  

 </form>
</body>
</html>

How to deal with this?


Appreciate your help.



Dexter