Spry tabs not working in IE 7, but working in Firefox.

[wavlen]

I have a simple site here: http://www.thechimneysweep90.com that has a tabbed panel setup.  The site works in Firefox (and apparently in IE 8), but does not work in IE7.  IE7 supports these tabbed panels right?  Any help on solving this (probably new user issue!) is greatly appreciated.

[pziecina · Accepted solution]

Hi,

Sorry it has taken me so long to offer a (possible) solution, but I have broken my glasses and !

I have checked your page (it even works in IE6), and as you say nothing in IE7, one possible reason is described in the article (Opposite to your problem, but hopefully same fix), see- http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm

The possible fix's are in the 'work around's section.

PZ

[wavlen]

Thanks, that info has helped, but unfortunately it is still not functioning quite right.  Maybe I misunderstood whats going on... what I did to fix this is add some code in the SpryTabbedPanels.js, here is the original:

Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
{
some code...

      this.addClassName(tabs[tpIndex], this.tabSelectedClass);
      this.addClassName(panels[tpIndex], this.panelVisibleClass);
      panels[tpIndex].style.display = "block";

      this.currentTabIndex = tpIndex;
};

and modified it to this:

Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
{
some code...

      this.addClassName(tabs[tpIndex], this.tabSelectedClass);
      this.addClassName(panels[tpIndex], this.panelVisibleClass);

panels[tpIndex].style.position = "relative";
panels[tpIndex].style.position = "absolute";
panels[tpIndex].style.position = "relative";
panels[tpIndex].style.display = "block";
panels[tpIndex].style.display = "none";
      panels[tpIndex].style.display = "block";

      this.currentTabIndex = tpIndex;
};

Now the content all dispalys the first time, but the second time I click on the tabs (in IE7 only) the images in the panels don't display.

[pziecina]

Unfortunately IE has a problem with setTimeout, (IE 8 was fixed), see -

http://webreflection.blogspot.com/2007/06/simple-settimeout-setinterval-extra.html

PZ

[wavlen]

I am not following how the setTimeout is pertaining to this situation (I don't find it in the javascript for the tabbed function)... can you give me a bit more detail?  Thanks...

[pziecina]

This is pertaining to the images, in the 'home' tab, as they are a slideshow controlled by the setTimeout function.

Was the problem you now have, not with these images?

PZ

[wavlen]

Yes, thank you.  I will take a look at that now.

[wavlen]

hmmm... there are static (not in a slide show pictures on the other tabs, they don't show either.  I tried removing all of the script that does the slide show and the image on the home tab, but the images on the other tabs still don't show... so I suspect the setTimeout is not the issue?

[pziecina]

Did not see this before (had to view generated code not source), -

<div style="position: relative; display: block;" class="TabbedPanelsContent TabbedPanelsContentVisible">

Try removing the style attributes from this, and let me know if that fixes the problem.

PZ

[wavlen]

The style attributes that you are asking about are not in my source index.htm.  I think they are being added by the change I made to the showpanel function of SpryTabbedPanels.js that I talked about in my second post.  After I added these the content in the tabs does show up, but after clicking to another tab and then returning to a tab that also has an image in it the image does not show up...so if I remove that code I will be back to square one, where nothing showed up in any of the tabs.

[wavlen]

Some more info, if I leave a tab open for a while (around 30sec to a minute) and then hover over the tab, the tabs image will then sometimes 'appear'.

[pziecina]

Try removing the following rule from your css -

.twoColFixLtHdr #container #mainContent h1 {
    font-style: italic;
    background-color: #999;
}

If you wish to revert to the original spry files (backup your edited ones just in case), an easy way is to install the spry updater (for CS3/4), delete the current ones and then insert the original spry versions using the spry updater.

Updater available here - http://labs.adobe.com/technologies/spry/

PZ

[wavlen]

Unfortunately, I had to stop debugging this.  I have taken the tabbed panels out and redone the pages using traditional menus.  So... I don't know what the real problem is for now.