PDA

View Full Version : IE7 Issue with Tab Content Script



Flub
11-12-2006, 08:26 AM
1) Script Title: Tab Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/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
11-12-2006, 09:29 AM
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
11-12-2006, 09:40 AM
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 :eek:


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

joshywood
11-13-2006, 01:29 AM
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/dynamicindex17/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
11-13-2006, 08:04 AM
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/dynamicindex17/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
11-13-2006, 08:29 AM
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
11-13-2006, 08:52 AM
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
11-13-2006, 08:59 AM
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
11-13-2006, 09:47 AM
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
11-13-2006, 09:54 AM
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.

jscheuer1
11-13-2006, 10:16 AM
You're welcome. Just to be clear, it isn't so much the 'top' page that would be the problem with its code being invalid (though this could play a role) as the external page(s). To validate them though, you would need to offer them to the validator as individual pages. If there is a nesting of external content, each level would need to be tested individually as a page in its own right.

Flub
11-13-2006, 12:54 PM
Maybe I've going mad again but admin mentioned "since it's missing the closing "</LI>""

All my LI are closed in my page example. Can you give me a line/example where one is not closed?

Thanks very much and please help save my sanity :)

jscheuer1
11-13-2006, 04:18 PM
Well the page still isn't valid. No head, no body, no DOCTYPE, self closing tags where not required. I'm not certain that has anything to do with it though. In any case, here is a valid working version of your current page at:

http://www.darkufo.co.uk/tab/demo.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
position:relative;
z-index:1;
background: white url(shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li.selected{
position: relative;
top: 1px;
}

.shadetabs li.selected a{ /*selected main tab style */
background-image: url(shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block!important;
}
}
</style>

<script type="text/javascript" src="tabcontent.js">

/***********************************************
* Tab Content script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
</head>
<body>
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">Tab 1</a></li>
<li><a href="#" rel="tcontent2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

<div class="tabcontentstyle">

<div id="tcontent1" class="tabcontent">
Tab content 1 here<br>Tab content 1 here<br>
<p><b><a href="javascript: expandtab('maintab', 3)">Click here to select 4th tab</a></b></p>
</div>

<div id="tcontent2" class="tabcontent">

<ul class='shadetabs' id='visualtab' style='font: 10px Arial;'>
<li class='selected'><a href='#' rel='tcontentvisualvideo'>Video</a></li>
<li><a href='#' rel='tcontentvisualphoto'>Photo</a></li>
<li><a href='#' rel='tcontentvisualmagazine'>Magazine</a></li>
</ul>

<div class='tabcontentstyle' style='width: 730px;'>


<div class='tabcontent' id='tcontentvisualvideo'>
Tab content 10a here<br/>Tab content 10a here<br/>
</div>

<div class='tabcontent' id='tcontentvisualphoto'>
Tab content 11a here<br/>Tab content 11a here<br/>
</div>

<div class='tabcontent' id='tcontentvisualmagazine'>
Tab content 11a here<br/>Tab content 11a here<br/>
</div>

</div>
</div>

<div id="tcontent3" class="tabcontent">
Tab content 3 here<br>Tab content 3 here<br>
</div>

<div id="tcontent4" class="tabcontent">
Tab content 4 here<br>Tab content 4 here<br>
</div>

</div>

<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab","visualtab")
</script>
</body>
</html>

I've put the style on the page and updated it, the style appears to have been the problem.

Flub
11-13-2006, 07:36 PM
Well the page still isn't valid. No head, no body, no DOCTYPE, self closing tags where not required. I'm not certain that has anything to do with it though. In any case, here is a valid working version of your current page at:

http://www.darkufo.co.uk/tab/demo.htm


I've put the style on the page and updated it, the style appears to have been the problem.

Thank you! I will test it out :)


EDIT: That worked. Brilliant. I really appreciate your help.