CSS styles not applied for RichFaces tags

[mouli_ed]

Hi,

Please help in the below issue..

In my applicaiton i am having a home page which contains Rich menu tags and below i have <a4j:include> tag which will load the pages based on the menu option selected.

<link rel="stylesheet" type="text/css" href="styles/common.css" />
<div class="menucontainer">
<rich:toolBar width="99%">
 <rich:dropDownMenu value="Home">
 </rich:dropDownMenu>
 <rich:dropDownMenu value="Employee">
 <rich:menuItem submitMode="ajax" value="Search" actionListener="#{dynamicIncludeBean.openEMPSearch}" reRender="includedView">
 </rich:menuItem>
 </rich:dropDownMenu>
</rich:toolBar>
</div>
<div class="contentcontainer">
 <a4j:include id="includedView" viewId="#{dynamicIncludeBean.page}" rendered="true" ajaxRendered="true"></a4j:include>
</div>

The CSS styles have been imported using tags. So when the user selects the menuitem "Search" i am loading "empsearch.jsp" page in the include part using the backing bean...
The code for empsearch.jsp is as follows....

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<rich:panel styleClass ="headerClass">

 <div>
 <p style="float:left;color: #00008B; text-decoration: none;font-family: Arial, Helvetica, sans-serif;font-size: 8pt;">Employee>>Search</p>
 <p align="right" style="float: right;padding:0 10px 0 0;">
 <a4j:commandButton value=" Save " onmouseover="this.style.color='#d30100'" onmouseout="this.style.color='#ffffff'"
style="background:url(images/toolbar-Menu-Back.gif) repeat-x;border:1px solid #5f8cc3;color:#ffffff;cursor:pointer;font-size:8pt;" />
</p>
 </div>
<rich:panel>

The common.css contains a style as follows
.headerClass{
width:990px;
border:0px;
padding:0px;
background:transparent;
}

The problem is when user clicks search menu option the empsearch.jsp is getting loaded but the sytle what i have mentioned for the <rich:panel> tag in css style class "headerClass" is not loaded.
But once after loading the page, if i refresh the browser window the styles are getting applied.
i have tried to load the styles using <a4j:loadStyle> tags but still it's not applied.

But if we mention the styles as inline i.e in the <rich:panel> tag itself ...then it is applied correctly....
<rich:panel style="width:990px;border:0px;padding:0px;background:transparent;">

please any one give me the correct solution. I am posting the same issue second time...
Please let me know if anyone need more information on this....
I am stuck with this for past two weeks.

Thanks & Regards,
Mouli