Dojo: Problem of having TabContainer inside ContentPane in IE8

In Dojo, the popular JavaScript library, we have ContentPane which allows us to put different widget into it, such as TabContainer, DataGrid, etc. They works fine in most browsers, but in IE 8, that could be a bit tricky.

Suppose we have the following code fragment:

<div id="testContentPane" 
     data-dojo-type="dijit/layout/ContentPane"" 
     style="height: 200px; overflow: auto; border: 5px blue solid;">

    testing 1 <br> testing 2 <br> testing 3 <br> 
    testing 4 <br> testing 5 <br> testing 6 <br><br>
    
    <div id="testTabContainer" 
         data-dojo-type="dijit/layout/TabContainer"
         style="width:80%; height:200px;" 
         disabled='disabled'>
         
        <div id="tabControl" 
             data-dojo-type="dijit/layout/ContentPane" 
             title="Tab" closable="false">
            Testing tab
        </div>
        
    </div>

</div>

The above code fragment is suppose to create a ContentPane and put a TabContainer into it:

Everything goes fine with IE 10, IE 9, Chrome, Firefox, but in IE 8, we have:

Look! The TabContainer just floating on top of the ContentPane. How to solve this issue?

Put CSS position: relative in the ContentPane and the issue will be fixed.

Why? Because in IE 8, the TabContainer is position:absolute. If ContentPane position CSS is not assigned, the TabContainer will leave out of it. By assigning position:relative to ContentPane, the position of TabContainer will be limited inside the ContentPane. Like this:

Using JavaScript to detect IE 8

I was just thinking to use the following JavaScript to detect IE 8:

  navigator.appVersion.indexOf("MSIE 8") > -1

But you know, when IE 8 is in compatibility mode, the agent string will become MSIE 7 instead.

So, use the following to check for IE 8 for safe:

  navigator.appVersion.indexOf("Trident/4") > -1