Tabs not working in IE 6?? Why?

tarlejh · August 31, 2009

I have a simple tabbed set of divs using JQuery. The JQuery looks OK since you can navigate through the divs, but the CSS that is supposed to create the actual tabs kicks them all over to the left, so that they're stacked on top of each other vertically, rather than laid out horizontally, adjacent to each other from left to right.

Here's the code:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>

a { outline: none; }

.ui-tabs .ui-tabs-hide {
        display: none;
}
.ui-state-active a { 
        color: #fff;
}
.ui-state-active a.CANav-1 { 
        width: 50px;
        background: blue;
}
.ui-state-active a.CANav-2 { 
        width: 50px;
        background: blue;
}
.ui-state-active a.CANav-3 { 
        width: 50px;
        background: blue;
}

/* Blog Module Nav (Tabs)
----------------------------------------------------------- */
#CAContainer {
    
        padding: 42px 10px 14px;
        background: blue;
        margin: 0 auto;

}
#CAContainer a {
  
        text-decoration: none;
        color: #209ce7;
}
ul#CANav {
      
        list-style-type: none;
        margin: 0;
        padding: 0;
}
ul#CANav li {
     
}
ul#CANav li a {
        display: block;
        width: 58px;
        height: 17px; 
        margin-right: 1px;
        padding: 0;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        
}
ul#CANav li a.last {
        margin-right: 0;
}
ul#CANav li.CANav-1 {
        background: blue;
}
ul#CANav li a.CANav-1 { width: 94px; }

ul#CANav li.CANav-2 {
        background: green
}
ul#CANav li a.CANav-2 { width: 94px; }

ul#CANav li.CANav-3 {
        background: yellow
}
ul#CANav li a.CANav-3 { width: 94px; }

ul#CANav li.CANav-1 a:hover, ul#CANav li.CANav-1 a:focus {
        background: blue;
}
ul#CANav li.CANav-2 a:hover, ul#CANav li.CANav-2 a:focus {
        background: green;
}
ul#CANav li.CANav-3 a:hover, ul#CANav li.CANav-3 a:focus {

        background: orange;
}


/* Blog Modules
----------------------------------------------------------- */
#CA-1, #CA-2, #CA-3 {
        width: 305px;
        background: #fff;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
}
#CA-1 { 
        border-top: 3px solid #F69123;
}
#CA-2 {
        border-top: 3px solid #F69123;
}
#CA-3 {
        border-top: 3px solid #F69123;
}
#CA-1 h2, #CA-2 h2, #CA-3 h2 {
        
        font: bold 1em/2em Helvetica, Arial, sans-serif;
        margin: 5px 0 0;
}
#CA-1 div, #CA-2 div, #CA-3 div {
       
        padding: 6px 0;
}
#CA-1 div a, #CA-2 div a, #CA-3 div a {
        color: #000;
        font: bold 1em/2em Helvetica, Arial, sans-serif;
        padding: 2px 6px;
        text-decoration: underline;
        background: #fff100;
}

#CAContainer ol {
        list-style: decimal inside;
        height: 108px; /* 128px */
        margin: 0 10px;
        padding: 10px 5px;
        color: #209ce7;
        font: bold 12px/22px Helvetica, Arial, sans-serif;
                border-bottom: 1px dashed #ccc;
}
#CAContainer ol a:hover, #CAContainer ol a:focus {
        background: none;
        color: #55c6f2;
}

</style>
<script language="JavaScript" src="http://img.sparknotes.com/js/jquery.js"></script>
</head>
<body>
<div id="CAContainer">

<ul id="CANav"> 
        <li class="CANav-1"><a href="#CA-1" class="CANav-1">Most Emailed</li>
        <li class="CANav-2"><a href="#CA-2" class="CANav-2">Most Commented</a></li>
        <li class="CANav-3"><a href="#CA-3" class="last CANav-3">Most Viewed</a></li> 

<div style="clear: all;"></div>
<div id="CA-1">
Section 1

</div>
<div id="CA-2">
Seciton 2

</div>
<div id="CA-3">

Section 3
</div>
</div>
<script language="JavaScript" src="nav.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.tabs.js"></script>
</body>
</html>

It's a longshot, but are they any CSS gurus out there that can see the problem just by looking at this code?

If so thanks in advance for any help.

Hybride · September 3, 2009

Not a guru by any means, but from what am seeing, you don't have any position:relative to help actually position your tabs.

Sign In

Tabs not working in IE 6?? Why?

Recommended Posts

tarlejh

Link to comment

Share on other sites

Hybride

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information