Question

I have a relative big problem on my hands. I have a client, who is using IE7 and the business card websolution we’ve created has a problem loading tabs with ajax content in their browser.

We are using the Simple Tabs from http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/

We have a preview of the business card which is loaded when selected from a dropdown. Then the front and backside of the business card is loaded in 2 seperate tabs called front and back.

When viewed in FF, Chrome, IE8+ there is no problem with loading the different business cards, but in IE7 (Possibly older versions as well, but we’ve already quit supporting those), only the front (which is the default tab) is loaded. As soon as you select the “Back” the preview is not loaded (ajax) – going back to the “Front” tabs when in the “Back” tab will also make the “Front” tab empty.

This is the code we are using

<script type="text/javascript">
function tabs() {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first-child").addClass("active").show(); //Activate first tab
$(".tab_content:first-child").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content

    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
});

 };
 </script>

I’ve created a demo user for you to try it out – The site is in Danish, but i’ve provided a brief translation

http://ftp.inprint.dk/web2inprint/

Username (Brugernavn): test

Password: test

This will take you to the configuration screen.

Here you can select a template in the first drop down called “Skabelon”. In the preview to the right you have

Forside – Front

Bagside – Back

Hope this helps.

Thanks in advance for anyone who can shed some light on this issue!

Answer 1

I have faced many such issues with IE. Basically when your tabs load and the “Back” tab is hidden then any other controls within that Tab are rendered as either Width 0 and Height 0 or are marked as visible false on the client side.

You might want to try and see if the actual content is there on the Back Tab or not and if it is whether its dimensions are 0. If that is the case it is a simple matter of resizing to right dimensions

Edit: To handle IE obscurity, you might want to try this

$("ul.tabs li").click(function() {

    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content

    $(activeTab).fadeIn(); //Fade in the active ID content
    // IE Hack starts
     if($.browser.msie && $.browser.version.indexOf("7.")>-1){
       $(".active").show(); //or adjust the selector to show the right tab please.
     }
    // IE Hack ends
    return false;
});

 };