tabs will not show in ie 6 and 7. Is it my jquery or css?
<p>I used jquery and css to create tabs, but they do not work right in ie 6 and 7.  The     tabs are not clickable and the content for each tab is just displaying under each other.     Here's all the code.  Part 2 is css.</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Spencer's Portfolio-Home&lt;/title&gt;
&lt;link href="master.css" rel="stylesheet" type="text/css" /&gt;
&lt;link href="css/lightbox.css" rel="stylesheet" /&gt;
&lt;script type="text/javascript" src="js/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
&lt;script src="js/lightbox.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.address-1.4.min.js"&gt;&lt;/script&gt;     
&lt;script type="text/javascript"&gt;
var QTABS = {

    init: function () {

        // attached onload and change event to address plugin
        $.address.init(function(event) {

            // first load, set panel
            QTABS.setPanel(event);

        }).change(function(event) {

            // if the url changes, set panel
            QTABS.setPanel(event);          

        });

    },

    // the core function to display correct panel
    setPanel: function (event) {

        // grab the hash tag from address plugin event
        var hashtag = event.pathNames[0];

        // get the correct tab item, if no hashtag, get the first tab item
        var tab = (hashtag) ? $('#tabs li a[href=#' + hashtag + ']') :     $('#tabs li:first a');

        // reset everything to default
        $('#tabs li').removeClass('active');
        $('#panels .panel').hide();

        // if hashtag is found
        if (hashtag) {

            // set current tab item active and display correct panel
            tab.parent().addClass('active');
            $('#panels .panel:eq(' + (tab.parent().index()) + ')').show();          

        } else {

            // set the first tab item and first panel               
            $('#tabs li:first').addClass('active');
            $('#panels .panel:first').show();           

        }

        // change the page title to current selected tab
        document.title = tab.attr('title');

    }

}

// Execute this script!
QTABS.init();
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="pageContainer"&gt;
&lt;div id="header"&gt;  
&lt;h3&gt;Spencer K. Edwards&lt;/h3&gt;  
&lt;/div&gt;
&lt;div id="allTabs"&gt;
&lt;div id="tabs" class="clearfix"&gt;

    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#site" title="Site Design"&gt;Site Design&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#HCI" title="Human Computer Interaction"&gt;HCI/UX Documentation&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#freeD" title="Free Designs"&gt;Free Designs&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

&lt;/div&gt;  

&lt;div id="panels"&gt;
    &lt;div class="panel-wrapper"&gt;
        &lt;div class="panel"&gt;
            &lt;h2&gt;Website Design Works&lt;/h2&gt;
            &lt;p&gt;Below you will find various website designs I put together to this point.  Each of these models were created following a strict design process.  The software used for these prototypes was Adobe Photoshop. Click the images to enlarge.&lt;/p&gt;&lt;p&gt;
        &lt;table cellspacing="10" cellpadding="20"&gt;   
            &lt;tr&gt;&lt;td&gt;&lt;a href="images/design1.jpg" rel="lightbox[web]" title="Personal site prototype for Professor John H. Cushman"&gt;&lt;img src="images/cushThumb.jpg" height="174" width="250" alt="cushsite"/&gt;&lt;/a&gt;&lt;/td&gt;
            &lt;td&gt;&lt;a href="images/personal site.png" rel="lightbox[web]" title="First prototype for my Portfolio site"&gt;&lt;img src="images/persThumb.png" height="158" width="250" alt="perssite"/&gt;&lt;/a&gt;&lt;/td&gt;
            &lt;td&gt;&lt;a href="images/recent site.png" rel="lightbox[web]" title="Site prototype for Authority Automotive Detailing"&gt;&lt;img src="images/recentThumb.png" height="116" width="250" alt="recsite"/&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
           &lt;tr&gt;&lt;td&gt;&lt;a href="images/canwear3.jpg" rel="lightbox[web]" title="Site prototype for Canwear Apparel"&gt;&lt;img src="images/canThumb.jpg" height="187" width="250" alt="cansite"/&gt;&lt;/a&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
                    &lt;/div&gt;
        &lt;div class="panel"&gt;
            &lt;h2&gt;Panel 2&lt;/h2&gt;
            &lt;p&gt;Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus.&lt;/p&gt;&lt;p&gt;&lt;a href="#tab3"&gt;Go to Tab3&lt;/a&gt;&lt;/p&gt;      
        &lt;/div&gt;
        &lt;div class="panel"&gt;
            &lt;h2&gt;Panel 3&lt;/h2&gt;
            &lt;p&gt;Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus.&lt;/p&gt;&lt;p&gt;&lt;a href="#tab1"&gt;Back to Tab1&lt;/a&gt;&lt;/p&gt;        
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt; &lt;!-- //#panels --&gt;
  &lt;/div&gt;
&lt;/div&gt; 

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Part 2---->css</p>

<pre><code>            ul { list-style:none;
                }
        #tabs {
        margin-top:200px;
    }
    #tabs ul {
        list-style:none;
        margin:0; 
        padding:0;
    }

    #tabs ul li {
        float:left;
    }

    #tabs ul li a {
        display:block;
        padding:5px 10px;
        font-weight:bold;
        color:#0C0;
        text-decoration:none;
        font-size:120%;
    }       
    #tabs ul li.active a {
        background:#000;
        color:#fff;
    }               

#panels {
    width:100%;
    background:#000;
    opacity:.7;

}
    #panels .panel-wrapper {
        padding:10px;
    }

    #panels .panel {
        color:#CCC;

    }

    #panels .panel h2 {
        margin:0 0 10px 0;  
    }       

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */     

/*
* CSS3 Styling
*/

#tabs ul li a { 
    border-top-left-radius : 5px;      
    border-top-right-radius : 5px;              
}
#panels {
    border-bottom-left-radius : 5px;      
    border-bottom-right-radius : 5px;       
}
</code></pre>
