Ajax load div , part of CSS not working
Posted
by user225228
on Stack Overflow
See other posts from Stack Overflow
or by user225228
Published on 2010-05-18T02:02:05Z
Indexed on
2010/05/18
2:20 UTC
Read the original article
Hit count: 294
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!
© Stack Overflow or respective owner