I’m currently working on a tabbed panel script for this website.  It’s working fine in all standards-compliant browsers but not in Internet Explorer (anyone surprised?).

The menu to change the panel content is a simple unordered list with the following markup:


<ul class="secMenu">
<li id="tab4" class="activeTab">Background</li>
<li id="tab3"><a onclick="switchPanel(this);">Technologies I Employ</a></li>
<li id="tab2"><a onclick="switchPanel(this);">Skills</a></li>
<li id="tab1"><a onclick="switchPanel(this);">Off the Computer</a></li>
</ul>

Now check out how IE7 interprets this (from DebugBar or an alert of the list’s parent div innerHTML):

<UL>
<LI id=tab4>Background
<LI id=tab3><A onclick=switchPanel(this);>Technologies I Employ</A>
<LI id=tab2><A onclick=switchPanel(this);>Skills</A>
<LI id=tab1><A onclick=switchPanel(this);>Off the Computer</A> </LI></UL>

I coded using XHTML 1.0 Strict and look how IE interprets it! Uppercase tags, no quotes around the attributes and missing closing list-item tags!

You may say, “Well, things must get better for IE 8.” Well, they did a good job finally bringing the CSS up to standard but the DOM…

…Not so great

Well, there’s always hope for IE 9 (or 10, or 11, or…)