Dear friends

I have a script that puts a different css color and background image onto a menu for the link that has been clicked to open an iframe. This works fine, but because elements of the menu have to already have fixed css !important specifications, the javascript css modification is not 'as strong' as that.

The relevant part of the script is

for(var i = 0; i < as.length; i++) { 
as[i].style.color = 'white'; //default text color 
as[i].style.background = '#2175BC'; //default backgroundcolor 
if(as[i].href.toLowerCase() == pagename.toLowerCase()) { 
as[i].style.background = 'url(http://www.internetevangelismday.com/images/arrowlargeyellow.gif) no-repeat left blue';    //desired highlight bg colour second level menu


}

The value I would like to apply !important strength to is the background image item. Adding !important to the line itself does not work. It might carry a bit more strength too if the background color blue was separated from the background image. Can you see any way to do this?

Best wishes and thanks

Tony

The !important notation is used to rewrite users css defenition only.
So, your problem is not with !importan. Please, provide other relating code.

Thanks so much. Here's the full script:

function parNode(elm, elmType) {
                 if(elm.parentNode.nodeName.toLowerCase() == 'div') {
                     return false;
                }
                 var par = elm.parentNode.nodeName.toLowerCase() == elmType.toLowerCase() ?
   
                  elm.parentNode : parNode(elm.parentNode, elmType);
                 return par;
            }

function highlight_menu(pagename, h) { 
document.getElementById('bookreviews').style.height = h + 'em'; 
var menu = document.getElementById('channel'); 
var as = byTag('a', menu); 
for(var i = 0; i < as.length; i++) { 
as[i].parentNode.style.background = 'url() no-repeat left #2175BC'; //default bgcolour 
if(as[i].href.toLowerCase() == pagename.toLowerCase()) { 
as[i].parentNode.style.background = 'url(images/arrowlargeyellow.gif) no-repeat left #0000FF'; //desired highlight bg colour 
if(parNode(as[i].parentNode, 'li')) { 
parNode(as[i].parentNode, 'li').style.background = 'url(images/arrowlargeyellow.gif) no-repeat left #0000FF'; // firstlevel bgcolor 
} 
} 
} 
}

function byTag(tag, parent) {
        if(parent) {
            if(parent.length && parent.length > 1) {
                //parent is an array of elements
                var arr = new Array();
                for(var i = 0; i < parent.length; i++) {
                    var ithpar = parent[i].getElementsByTagName(tag);
                    for(var j = 0; j < ithpar.length; j++) {
                        arr.push(ithpar[j]);
                    }
                }
                return arr;
            } else {
                //parent is a single element
                return parent.getElementsByTagName(tag);
            }
        } else {
            return document.getElementsByTagName(tag);
        }
    }

It is particularly the background image specs that I would like to have the power of css !important.

Thanks for any ideas

Best wishes

Tony

You will find it somewhat difficult due to browser "issues"

http://www.quirksmode.org/dom/w3c_css.html#properties

Ah well. Thanks!


Best wishes


Tony