JQuery tabs in IE not showing pictures
The problem I am having is that my pictures do not show up in the dynamic JQuery tabs in IE8 and below, but they show up in every other browser. I believe that it is associated with how the tabs load using JQuery because the pictures show up fine when I do not load the code. I used JQuery .hide() and fadeIn() functions in order to change tabs.
Here is a screen shot of what I am talking about: http://www.marinicorp.net/jquerytabs.htm
If you need anymore information just let me know.
HTML Code:
<div id="tabs" class="tabs">
<ul class="tabNavigation">
<li><a href="#tabCon">Construction Services</a></li>
<li><a href="#tabLand">Landscaping Services</a></li>
<li><a href="#tabSnow">Plowing Services</a></li>
</ul>
<div id="tabCon" class="tab_content">
<table style="position: absolute; top:35px; left:40px;">
<tr>
<td><img src="Images/pipeLay.gif" /></td>
<td><img class="tables" src="Images/projMan.gif" /></td>
<td><img class="tables" src="Images/surveyeng.gif" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div id="tabLand" class="tab_content">
<table style=" position: absolute; left:40px; top:35px;"> <tr>
<td ><img class="tables" src="Images/playGrounds.gif" /></td>
<td><img class="tables" src="Images/plantTrees.gif" /></td>
<td><img class="tables" src="Images/genLand.gif" /></td>
</tr>
<tr><td></td><td></td></tr>
</table>
</div>
<div id="tabSnow" class="tab_content">
<table style=" position: absolute; left:40px; top:35px;">
<tr>
<td><img class="tables" src="Images/snowplow.gif" /></td>
<td><img class="tables" src="Images/shovelers.gif" /></td>
<td><img class="tables" src="Images/bobcat.gif" /></td>
</tr>
<tr><td></td><td></td></tr>
</table>
</div>
</div>
JQuery Code:
$(document).ready(function () {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("selected").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabNavigation li").click(function () {
$("ul.tabNavigation li").removeClass("selected"); //Remove any "active" class
$(this).addClass("selected"); //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;
});
});