Jquery display problem in IE

Question

I have a kind of "tab" solution built in jquery. When a user clicks a tab I get the id of that tab and shows the right content for that tab based on the id. It works perfect in Firefox, when the tab is clicked it hides all divs with class "Page" and then show the right Page.

In IE8 it also works in the same way BUT a strange thing happens, sometimes some content of another Page is shown over the content of the active Page. So if I click Tab1 it shows cotent of Page1 but the awesome-buttons from Page2 also show up. When dragging the mouse over the awesome-button that shouldn't be there it disappears, so it seems like a kind of "graphic/display" problem. It doesn't happen all the time, sometimes it works like it should.

Have anyone seen a problem like this and is there a solution?

This is the code in jquery, the html and css:

$(document).ready(function() {

$('.Pages').hide();

$('.Tab').click(function() {
    var isActive = $(this).hasClass('TabActive');
    var pages = $(this).closest('div').prev('div');
    var tabs = $(this).closest('div');
    $(".Page").hide();
    $(".Page").css({ 'z-index:': '0' });
    $(".Tab").removeClass('TabActive')


    //Toggle Open/Close
    if (isActive || pages.is(":hidden")) {
        pages.animate({ width: "toggle" }, 200);
    }

    //Show the content
    var id = this.id.substring(3, 4);
    $('#Page' + id).show();
    $("#Page" + id).css({ 'z-index:': '999'});

    //Mark the tab as active
    if (!isActive) {
        $(this).addClass('TabActive');
    }
});
});

HTML:

<div class="Pages">
    <div id="Page1" class="Page">
        Content 1
        <a class='medium green awesome' href='test.html'>Test</a>
    </div>
    <div id="Page2" class="Page">
        Content 1
        <a class='medium green awesome' href='test.html'>Test</a>
    </div>
</div>
<div class="Tabs">
    <ul>
        <li class="Tab" id="Tab1">Tab1</li>
        <li class="Tab" id="Tab2">Tab2</li>
    </ul>
</div>

CSS:

div .Pages 
{
    width: 300px;
    min-height: 350px;
    background: #fff;
    border: solid 1px #333;
    position: relative;
    float: left;  
    overflow: hidden;
    padding: 20px;
}

div .Page
{
    width: 100%;
    z-index: 0;
}

div .Tabs 
{
    float: left;
    margin: 10px 0px 0px 0px;
}

.Tabs ul
{
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.Tabs li
{
    padding: 0px;
    margin: 0px 0px 10px 0px;
}

.Tab
{
    margin: 0px 0px 0px 0px;
}

.TabActive
{
    color: red;
}


//THESE BUTTONS ARE THE ONES THAT SHOWS UP WRONG:
//GOT THESE FROM: http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

.awesome, .awesome:visited {
background: #f9f9f9 url(/images/alert-overlay.png) repeat-x; 
display: inline-block; 
padding: 5px 10px 6px; 
color: #fff; 
text-decoration: none;
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
text-shadow: 0 -1px 1px rgba(100,100,100,0.1);
border-bottom: 1px solid rgba(0,0,0,0.1);
position: relative;
cursor: pointer;
}

.medium.awesome, .medium.awesome:visited        { font-size: 11px; font-weight: bold; line-height: 1;  }
.green.awesome, .green.awesome:visited      {     background: url(images/buttons/greenbuttonbg.png) repeat-x 0 0; }

Answer 1

try display:none instead of display:hidden

Answer 2

Is there a reason you are using this rather than using the jquery ui tabs?

Answer 3

It would help to know what your css looks like. try adding a z-index:10 to the currently displayed div.

Answer 4

I'd be tempted to do:

if(!$(this).hasClass('TabActive'))
{
  // Hide/show pages
  $('.Page').hide();
  $('#Page' + this.id.substring(3, 4)).show();

  // Show Pages
  pages.animate({ width: "toggle" }, 200);

  // Deal with active classes
  $(".TabActive").removeClass('TabActive');
  $(this).addClass('TabActive');
}
else
{
  if($(".Pages").is(":hidden"))
    pages.animate({ width: "toggle" }, 200);
}

That way you know all the pages are always being hidden.

Answer 5

Does your page have a valid doctype? Sounds like there may possibly be some malformed HTML somewhere in your page?

Answer 6

I couldn't quite reproduce the problem you're having, but I did notice an issue in your JavaScript. When you set the z-index, you example code looks like this:

$(".Page").css({ 'z-index:': '0' });

You don't need the colon after 'z-index' - it should be like this:

$(".Page").css({ 'z-index': '0' });

I don't know if this will fix your problem or not.

Answer 7

This might be related to the IE z-index bug. I know that IE6 and 7 both have issues with displaying content wrong in regards to the z-index. A quick Google search might shed some light on this as there a some work arounds with jQuery

Answer 8

Could be an IE8 bug, it's not the first time something in IE jumps to front when it shouldn't have.

Also please loot at this question: http://stackoverflow.com/questions/1290191/z-index-broken-in-ie8