IE issue with JavaScript CSS change code

Firefox doesn't show any issues but IE keeps giving errors

[kasura]

Hi all, newbie here.

I've got a site for a client that updates the stylesheet within an iFrame dynamically based on user-selected elements (text fields, radio buttons, etc). Everything's working great in Firefox, but a couple of elements aren't working in IE6 (haven't tested in 7- client wants it to work in 6, so that's my focus). IE's complaint that keeps returning is line 216, character 13, which has me a bit confused. The basic area of the complaint is this:

function addCSSRule(ruleName) {
if (window.frames['preview'].document.styleSheets) {
if (!getCSSRule(ruleName)) {
if (window.frames['preview'].document.styleSheets[0].addRule) {
window.frames['preview'].document.styleSheets[0].addRule(ruleName, null,0);
} else { window.frames['preview'].document.styleSheets[0].insertRule(ruleName+' { }', 0);
}
}
}
return getCSSRule(ruleName);
}

(That's lines 210-221.)
The thing that really confuses me is that the same code is called all over the page and seems to work everywhere else except two or three cases. The HTML code that's calling the script is this:

<input type="text" name="bgclr" size="10" maxlength="11"
onChange="addCSSRule('table, tr, td');
updCSSRule('table, tr, td','backgroundColor','transparent');
addCSSRule('body');
updCSSRule('body','backgroundColor',this.value);">
<input type="button" value="Color Picker"
onClick="showColorPicker(this, document.forms[0].bgclr);" /><p />

<input type="text" size="15" name="bgimg" value="http://"
onChange="addCSSRule('table, tr, td');
updCSSRule('table, tr, td','backgroundColor','transparent');
addCSSRule('body');
changeBgImg('body','backgroundImage',this.value);"><p />

<input type="text" name="secbgclr" size="10" maxlength="11"
onChange="addCSSRule('table table table td, table table table');
updCSSRule('table table table td, table table table','backgroundColor',this.value);">
<input type="button" value="Color Picker"
onClick="showColorPicker(this, document.forms[0].secbgclr);" /><p />

If anybody can point out anything that's glaringly wrong that I missed, I would be MOST grateful. I can't share a link to the in-dev site (still under wraps, unfortunately) but I can post more code if necessary. Thank you SO much!

[penders]

What is the actual error you are getting (on line 216, char 13) ...?

Just to note that although IE may report the error as line 216, file: mypage.html - it may actually be line 216 in an external JS file that is linked to mypage.html ...?

[kasura]

The error's returning as "invalid argument". Since the external JS file that contains the addCSSRule function is the only one that's got 213 + lines, it was easy enough to narrow it down to something in that file.

Through more trial and error last night I'm pretty sure it has something to do with the } else { statment, though what it is still confuses me. o_O

[kasura]

Ok, found this part out. Apparently IE was having issues with the fact that there were two instances (IE and Mozilla) in the code. Removed it by removing the need for the addCSSRule and just updating an existing rule.

Now it seems IE is having trouble with updating two rules at once- it will now do a change of background color perfectly, but won't run the script to make the tables transparent. Does anybody have experience with this sort of issue?

Thanks again!

[mrhoo]

if you examine the styleSheet object returned by IE you will see that it returns a separate rule for every selector-

if you have the line
p, h2{font-family:serif}

IE's styleSheet shows:

p{font-family:serif}
h2{font-family:serif}