IE7 Issue with Tab Content Script

[Flub]

1) Script Title: Tab Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm

3) Describe problem:

I've been playing around with the Dynamic tab based code and I've hit a Browser specific problem, which I wonder if you could help me with.

On my page here: -> http://www.darkufo.co.uk/tab/demo.htm

You will notice that on Tab 2 I have a number of sub-tabs, these all work fine in FF 1.5, FF 2.0, Opera 9 but in IE 7 it does work (sort of) but the sub tabs are very hard to select. Try to click on the sub-tabs and you'll see what I mean. In the other browsers no problem.

I've not tested on IE 6 as I've upgraded all my computers . Would you mind taking a quick look and seeing if there is a quick fix for this?

Many thanks in advance.

Cheers
Flub

[ddadmin]

Hmmm this is a strange one. At first I thought it was your HTML code, since it's missing the closing "</LI>" tags for all of the tab links, though putting them in didn't help. I couldn't isolate the problem within the script (.js) file either. I'll have to revisit this thread once I have time to see if I can get to the source of the problem. It has something to do with the script changing the HTML in a way that IE just doesn't agree with once you start nesting the tabs.

[Flub]

Hmmm this is a strange one. At first I thought it was your HTML code, since it's missing the closing "</LI>" tags for all of the tab links, though putting them in didn't help. I couldn't isolate the problem within the script (.js) file either. I'll have to revisit this thread once I have time to see if I can get to the source of the problem. It has something to do with the script changing the HTML in a way that IE just doesn't agree with once you start nesting the tabs.

Thanks very much for getting back to me I thought I was going mad


EDIT: "since it's missing the closing "</LI>" " - Where is this sorry?

[joshywood]

I just tested it in IE6 and had no problems. I wonder if this is an IE7 specific problem, I don't have IE7 so I can't test it out on there. But tell me something, do you have the same issue when try clicking the tabs of the Tabbed Content Demo here on Dynamic Drive: http://www.dynamicdrive.com/dynamici...tabcontent.htm

I ask this because I want to narrow down whether it's a fundamental issue with the script itself, or just effecting the one you posted. Also, I wonder if the AJAX version of the Tabbed Content Component is also experiencing this? Hmm, anyway, let me know whether its just ur script or also the one here on DD thats being effected.

- Josh

[Flub]

I just tested it in IE6 and had no problems. I wonder if this is an IE7 specific problem, I don't have IE7 so I can't test it out on there. But tell me something, do you have the same issue when try clicking the tabs of the Tabbed Content Demo here on Dynamic Drive: http://www.dynamicdrive.com/dynamici...tabcontent.htm

I ask this because I want to narrow down whether it's a fundamental issue with the script itself, or just effecting the one you posted. Also, I wonder if the AJAX version of the Tabbed Content Component is also experiencing this? Hmm, anyway, let me know whether its just ur script or also the one here on DD thats being effected.

- Josh

Hi Josh,

This only appears to happen with Tabs embedded within Tabs. You page works fine in IE 7 as they are just single tabs.

On may page the top-lever tabs work in all browsers, it's only the sub-level tabs and only in IE 7 where the sub-tabs are hard to obtain a click focus.

Very odd.

[jscheuer1]

Hmmm this is a strange one. At first I thought it was your HTML code, since it's missing the closing "</LI>" tags for all of the tab links, though putting them in didn't help. I couldn't isolate the problem within the script (.js) file either. I'll have to revisit this thread once I have time to see if I can get to the source of the problem. It has something to do with the script changing the HTML in a way that IE just doesn't agree with once you start nesting the tabs.

I haven't looked at it but, any invalid HTML on the external files will often trigger this sort of response. You were right to go after the missing </li> tags but, there could be other problems as well. IE can be particularly picky when it comes to forms and tables but, really any code that doesn't validate on the external pages may cause problems.

It is the same as writing invalid code to the innerHTML object in any script.

[ddadmin]

Hi John:
Yeah, when I first saw the page's source code, I immediately thought I had it. The HTML is very much invalid with all those missing tags. But closing them didn't help and cleaning up some other things didn't help. I actually think the problem is with a difficiency in the script itself that is drawn to light when nested tabs are used in IE. Maybe I'm wrong, I'll see if I can devote some more time to this.

In the meantime Flub, you can't really blame this script, as it wasn't exactly intended to be used in a nested setting.

[Flub]

Hi John:
Yeah, when I first saw the page's source code, I immediately thought I had it. The HTML is very much invalid with all those missing tags. But closing them didn't help and cleaning up some other things didn't help. I actually think the problem is with a difficiency in the script itself that is drawn to light when nested tabs are used in IE. Maybe I'm wrong, I'll see if I can devote some more time to this.

In the meantime Flub, you can't really blame this script, as it wasn't exactly intended to be used in a nested setting.

Thanks guys I know, I wanted to try and "push" the script a little.

Can you let me know where these missing tags are in my HTML. I think I'm going mad as I cannot see what I'm missing

[jscheuer1]

Well, if you were to take your page to:

http://validator.w3.org/

It will tell you. The reason why I mentioned this bit about valid HTML is that - few of us really know what valid and invalid markup is, not me I'm sure. But the validator does. It will often pick up on things that are esoteric but, that really matter in DHTML. A page can work fine with sloppy code on it. But, when you try to feed that to a script, anything can happen and it will vary from browser to browser.

I've solved almost the same problem you are talking about here with a trip to the validator. It found things that looked OK to my experienced eye but, that were still invalid.

[Flub]

Well, if you were to take your page to:

http://validator.w3.org/

It will tell you. The reason why I mentioned this bit about valid HTML is that - few of us really know what valid and invalid markup is, not me I'm sure. But the validator does. It will often pick up on things that are esoteric but, that really matter in DHTML. A page can work fine with sloppy code on it. But, when you try to feed that to a script, anything can happen and it will vary from browser to browser.

I've solved almost the same problem you are talking about here with a trip to the validator. It found things that looked OK to my experienced eye but, that were still invalid.

Thanks John, really appreciate the post and the link. Cheers.