The first one is with form elements, mostly buttons (<button> tags). When I hide them with CSS using display: "none" these don't hide. The button still appears but without its label. For example if I had a button like [ Submit ] and hid it, it would appear as a blank box [ ]. This only happens to these buttons if they belong to a block that was already hidden. So if the game state calls for a button to dissappear and it happens to be in a section that is not currently visible then the buttons do not entirely go away. Now, this does not happen for every such button but for those buttons that it does happen it always happens, ie it's not intermittent. I can get around this problem with setting visibility: "hidden" as well as display: "none". Firefox does not have this problem. I tried to recreate this problem in a simple example to demonstrate here but was not successful, it may have something to do with my site being large and complicated, not sure though...
The second problem has to do with dynamically adding and removing rows to a table, using createElement and appendChild. I had one such table and was working fine except at some point it just stopped working in IE and after a row removal nothing would appear, the table would show blank. I could not find any reason why it should have stopped working and was showing fine in Firefox. I had the table inside a container div:
In the end I was able to solve this problem by doing:
var div = document.getElementById("table-container");
div.innerHTML = div.innerHTML;
Which to me verifies that this must be some sort of bug since the above line should have been a NO-OP.
So, even though I have been able to get around these problems (eventually) I would prefer to avoid these hacks and I am anyway curious as to why these things happen, maybe I am doing something to trigger them that I could avoid. If anyone has come across these issues I would appreciate some of their wisdom.