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!
