Heart of Darkness

IE6 is the Heart of Darkness.

Enough said.

But, for the sake of anybody who finds this by searching, the reason. Internet Explorer 6 (IE6) does not seem to take kindly to using jQuery to show and hide floated elements. I don’t know if it’s a general JavaScript bug or a jQuery specific bug.

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
                type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8">
            $(function() {
                $('span').click(function() {
                    $('div').hide();
                    $('#'+this.id+'_content').show();
                });
            });
        </script>
        <style type="text/css">
            div   {width:100%; float:left;}
            p     {float:left;}
        </style>
    </head>
    <body>
        <p>
            <span id="tab_1">T1</span>
            <span id="tab_2">T2</span>
        </p>
        <div id="tab_1_content">
            <p>1</p>
        </div>
        <div id="tab_2_content">
            <p>2</p>
        </div>
    </body>
</html>

This code has a very simple display with a very simple functionality. Two tabs (T1, T2) toggle the display of two divs (#tab_1_content, #tab_2_content). On click of a tab, ALL DIVs are hidden (css display:none-ed). Then, the div associated with the clicked tab is un-hidden (css display:block-ed).

Simple. One (and only one) of the divs is showing all the time. Great. Except in IE6, when the first div is hidden, it still “takes up space”. The first div is hidden, display:none-ed. It isn’t supposed to affect flow. It isn’t supposed to take up space. It isn’t supposed to do ANYTHING. It’s GONE. Only it’s not. Because in IE6, the newly shown second div sits down below where the first div was.

Apparently, IE6 doesn’t handle hidden floating things well. It’s not universal (the page this code was distilled from had the exact same block repeated above it without the issue appearing). It might only break for the LAST floating element. I’m not sure. Clearing the floated elements fixed it in the real-life example this code was distilled from, but it doesn’t fix it here.

For anybody who doesn’t care. I understand. All I ask is that you upgrade your browser if you’re still using IE6. My recommendation would be Firefox. Google’s Chrome is nice also. If you’re attached to the Microsoft native browser, IE8 is bearable. Mac users, you can’t accidentally use IE6. Congratulations. If I catch you using IE5Mac, I will find you, and you will pay.

About this entry

Title: Heart of Darkness

Published:
15.11.09
Category:
Uncategorized