IE6 parsing bug - anyone else?

**tonywhite** · Feb 1, 2007 12:39

I'm doing some dom scripting.

A quick description:

I have 10 anchor tags, and by default the class of all of them is set to "off", like so:

[a class="off"]blah blah blah [span][img class="close"] cha cha[/span][/a]

In the css:
a.off span {display:none;}

an external function and event will change one of the [a] tags' class to "on".

In the css:
a.on span {display:block;}

So now I see the span within that one [a] tag.

An onclick event is attached to the [img class="close"], that changes it's [a] ancestor back to "off".

Which then makes the [span] inside the [a] return to display:none;

It does this fine in IE7, FF Win, FF Mac, Safari, Opera Mac. It partly works in IE6, with this one problem:

When I click the close button, the [a] tag's classname changed back to "off" successfully, and ACCORDING TO THE IE DEVTOOLBAR, the span within that [a] tag is set to display:none, but it's still displaying! Why would the devtoolbar say "that span is set to display none" but the browser shows somethign completely different.

More than that:
In the script that does this change, I noticed if I add an alert() then duplicate the classname change, it works fine:

anchorTag.className = "off"; // still shows the span
alert("just an alert"); // still shows the span
anchorTag.className = "off"; // span is now gone - wtf!!!

If you have any ideas, it's greatly appreciated.

Thanks,
Tony

**jimfraser** · Feb 1, 2007 12:45

what do you get if you do

Code:

anchorTag.className = "off"; // still shows the span
alert(anchorTag.className); // still shows the span
anchorTag.className = "off"; // span is now gone - wtf!!!

**jimfraser** · Feb 1, 2007 13:02

Never mind I know why it's going on - the event is bubbling up and calling the onclick of the <a> tag again. Try this:

Code:

anchorTag.className = "off";
if (window.event) {
window.event.cancelBubble = true;
}

**tonywhite** · Feb 1, 2007 14:05

Jim -

Thanks for your reply.

To your first question, the alert box says "off".

As for your second post, I may not be implementing this correctly. I've tried some different ways to use this to no avail. Forgive my noobness, but I assume cancelBubble will remove the alert? I've tried:

Code:

anchorTag.className = "off";
if (window.event) {
     window.event.cancelBubble = true;
}

which doesn't correct anything. i still see a span that technically should be set to display block.

Code:

anchorTag.className = "off";
alert("just an alert");
if (window.event) {
     window.event.cancelBubble = true;
}
anchorTag.className = "off";

which doesn't do anything different (behaves the same as if the "if" statement weren't present.

If I'm implementing this wrong, please let me know. I appreciate you posting something for me to try. My last resort is to recode everything so that the script changes the span's style.display instead of changing the anchorTag's class, but I really think that would be much less efficient and managable.

**jimfraser** · Feb 1, 2007 14:10

Sorry for not explaining more clearly. Here is my test code, I think you'll see what's going on from there:

Code:

<html>
<head>
<style type="text/css">
a.on span {
	display: block;
}
a.off span {
	display: none;
}
</style>
<script type="text/javascript">
function on(obj) {
	obj.className = "on";
}
function off(obj) {
	obj.className = "off";
	if (window.event) {
		window.event.cancelBubble = true;
	}
}
</script>
</head>
<body>
<a class="off" onclick="on(this);">stuff<span><img src="blah.gif" onclick="off(this.parentNode.parentNode);" />some text</span></a><br/>
<a class="off" onclick="on(this);">stuff<span><img src="blah.gif" onclick="off(this.parentNode.parentNode);" />some text</span></a><br/>
<a class="off" onclick="on(this);">stuff<span><img src="blah.gif" onclick="off(this.parentNode.parentNode);" />some text</span></a><br/>
<a class="off" onclick="on(this);">stuff<span><img src="blah.gif" onclick="off(this.parentNode.parentNode);" />some text</span></a><br/>
<a class="off" onclick="on(this);">stuff<span><img src="blah.gif" onclick="off(this.parentNode.parentNode);" />some text</span></a><br/>
<a class="off" onclick="on(this);">stuff<span><img src="blah.gif" onclick="off(this.parentNode.parentNode);" />some text</span></a><br/>
</body>
</html>

**tonywhite** · Feb 1, 2007 14:52

beautiful - thanks! I'm seeing some very positive results.

User Tag List

Thread: IE6 parsing bug - anyone else?

Thread Tools

Display

IE6 parsing bug - anyone else?

cancelBubble

Bookmarks

Bookmarks

Posting Permissions