Altering CSS Rules with Javascript

[aj_nsc]

This is a quick compatibility issue that anybody who knows the ins and outs of Javascript and CSS will know immediately.

What I'm trying to modify below, isn't being modified in FF, but it is in IE...is there a quick fix to this?

    //GET THE STYLESHEET
    var mysheet=document.styleSheets["mainSheet"];
    var myrules=mysheet.cssRules? mysheet.cssRules: mysheet.rules;

    //THE TOGGLE FUNCTION
    function toggle (whichDiv,show) {
     var rule = "#" + whichDiv; //THE NAME OF THE DIV TO SHOW
     for (i=0; i<myrules.length; i++) { 

      if (myrules[i].selectorText.toLowerCase()=="#infohovers") {
       var infoHovers = myrules[i];
       infoHovers.style.display = show;
      }

      if (myrules[i].selectorText.toLowerCase()==rule){ 
       var targetrule = myrules[i]; 

        if (show == "block") {
         targetrule.style.zIndex = 1000;
        }

        else {
         targetrule.style.zIndex = 0;
        }     

       break; 
      } 
     }
    }

    function showDiv(whichDiv) {
	toggle(whichDiv,"block");
    }	
    
    function hideDiv(whichDiv) {
	toggle(whichDiv,"none");
    }
   //-->

[phpnovice]

I would install the Venkman Script Debugger for Firefox, step through your code a line at a time, and find where the problem lies.

[toicontien]

infoHovers.style.display = show; should be infoHovers.style.display = "block";

show is not a valid value for the display property, on top of the fact that show by itself should be read by the JavaScript interpreter as a literal, and not a string.

[phpnovice]

show is not a valid value for the display property

This is a passed argument name. Check the function prototype statement.

[toicontien]

missed that small piece of information My bad. Looking in the Firefox DOM Inspector for this page actually, I notice that the document.styleSheets object is actually an array of integer indexed style sheets. Try throwing myrules into an alert box and see what it shows.

Firefox might not be able to reference a style sheet by using a name (or the title as I imagine you are using). You might have to loop though the styleSheets array trying to match the .title property to "mainSheet".

[mrhoo]

I think the problem is a simple one, since it works in IE.

Firefox won't use an integer value to set an attribute- put your zIndexes in quotes.