I noticed two odd Internet Explorer (or IE for short) behaviors while I was working on a beta version of a network tools app my boss wanted. I also figured out the workaround.
DIVs Don’t Appear
I used a tab-based navigation for the beta version. When you click on a tab (composed of an
h2 and an
a), the corresponding
div would appear, hiding all the others. This was achieved by adding and removing a value in the
.className. In IE, though, the tab would work for two tabs, but would only hide tabs after that. The new tab wouldn’t appear.
To make matters worse, if I
alerted something in the loop that set or unset the
.classNames, it would work. I tried various things like
.display="none" while I was modifying things, then setting it back to
block when I was done, but none worked.
The solution turns out to be that you need to remove the container element, then reinsert it. For example:
1 2 3 4
var tabcont = document.getElementById('tab-container'), pn = tabcont.parentNode, ns = tabcont.nextSibling; pn.insertBefore(pn.removeChild(tabcont), ns);
TABLEs Don’t Show Content
I also needed to dynamically create tables. This can be done via straight text with
.innerHTML or via the DOM with
.appendChild. In some areas, the
tables could use
thead because the row headers were on top of the table. Other times, the
th was in the same
tr as the
td it matches.
In instances where there was a
thead, I also created a
tbody. Where there weren’t, I didn’t bother because the browser usually figures that stuff out. IE does not. So, if you’re using the DOM method of creating tables, make sure you explicitly use a
For the record, I was also using a
caption. So, that may have triggered something in IE that wanted an explicit
tbody. If your stuff seems to be working fine without the
tbody, it may have more to do with
caption being present.