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

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