At first glance, I cannot see any incompatible fragments of code, but they are not so easy to spot. Nevertheless, I can advise how to solve the problem.
There are some apparent problems in your code design. I mean it: this code style is unacceptable and can cause many different problems. You need to refactor the code, and, if the problem won't go (but most likely it will go), you would address further problems. So what do to?
Let's start with HTML and static styles. First of all,
get rid of all style
attributes, once and forever, and never come back to this bad idea. Use only class attributes, and only when you are not going to modify the style in JavaScript, or when you only want to add and remove additional class to elements in JavaScript, and those additional classes should add minor changes on top of "permanent" class. See about that below. Also, you are
overusing the classes. Why do you write a class at each
<td>
element? This is wrong. Figure out which elements should have the same style in most cases. And then, put this style in CSS code for object "td", not "td.fontbold12" (and never use such names as "fontbold12"; the styles should be named after they purpose, not look; for example: "td.selection"). Also,
don't ever use other styling attributes like "width", "cellpadding", "cellspacing"; move it all into CSS. Seriously.
Don't even play with the idea of leaving it as is.
Now, about changing styles dynamically using JavaScript. Don't add or remove style attributes, and (almost) never add or remove other attributes. Instead, add and remove CSS classes. Also, you should better add all event handlers dynamically. It will help to better isolate HTML from scripts. So, we are coming to your scripting. How to do it all?
One very good way to do so is using jQuery. Rememeber, jQuery is designed with compatibility in mind. In practice, you will have to check up compatibility of features only rarely, as jQuery takes care about that.
This is how you can add/toggle styles:
http://api.jquery.com/addClass/[
^],
http://api.jquery.com/removeClass/[
^],
http://api.jquery.com/toggleClass/[
^];
see also:
http://api.jquery.com/css/[
^],
http://api.jquery.com/category/css/[
^].
Events in jQuery are handled very elegantly, in a kind of in-place form, all set up in one single event when a document is ready. You will immediately see how to do it if you learn basics of jQuery (highly recommended):
http://en.wikipedia.org/wiki/JQuery[
^],
http://jquery.com[
^],
http://learn.jquery.com[
^],
http://learn.jquery.com/using-jquery-core[
^],
http://learn.jquery.com/about-jquery/how-jquery-works[
^] (start from here).
Arain,
remember that jQuery is designed with compatibility in mind.
—SA