Hello,
I'm using the ajax
to load a div content, but the div content is not taking the CSS of the page.
Example :-
This
link will load into
<a href="#" onclick="javascript:loadAjax('test.html')">Test</a>
<div id="result">
<table class="tablesorter">
<thead>
<tr>
<th>Header 1</th><th>Header 2</th>
</tr>
</thead>
<tbody>
<tr><td>Record 1</td><td>Desc 1</td></tr>
</tbody>
</table>
</div>
In my CSS :
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background-image: url(bg.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
In my test.html, it's the same table with different record :
<table class="tablesorter">
<thead>
<tr>
<th>Header 1</th><th>Header 2</th>
</tr>
</thead>
<tbody>
<tr><td>Record 2</td><td>Desc 2</td></tr>
</tbody>
</table>
The issue I'm facing is that before "test.html" is load, the CSS is fine. But after clicking on the
link which suppose
to loads test.html, the CSS background still shows but "cursor:pointer" and "background-image" not longer works.
What should I do
to make it work?
Thanks in advance!
