OnMouseOver font size wont change in FireFox.

Hi.
I have this code that works in IE but not in FFox :

onmouseover="getElementById('101').style.color='#286EA0'; getElementById('101').style.fontSize='18';"

onmouseout="getElementById('101').style.color='#808080'; getElementById('101').style.fontSize='12';">

-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~

Font color is theonly thing i can change in FFox...
How can i make the font size work ?
LVL 16
CodedKAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
BadotzConnect With a Mentor Commented:
Here is code that works in IE and FF. Copy it into your page and make any necessary changes.


<script type="text/javascript">
 
var css = document.styleSheets[0]; // get the FIRST stylesheet
var rules = css.cssRules ? css.cssRules : css.rules; // x-browser CSS rules
 
var mode = 0; // swap indicator
// -------------------------------------
 
function find_rule(rule) {
    for (var i = 0; i < rules.length; i++) {
        if (rules[i].selectorText.toLowerCase().indexOf(rule) >= 0) { // find rule
            return rules[i];
        }
    }
     return null;
}
// -------------------------------------
 
function change_rule(new_rule) {
    var old_rule = find_rule(new_rule.rule);
    if (old_rule != null) {
        old_rule.style[new_rule.attr] = new_rule.valu; // apply new css
    }
}
// -------------------------------------
 
function change_css(new_rule) {
    for (var i = 0; i < new_rule.length; i++) {
        change_rule(new_rule[i]); // apply all new css
    }
}
// -------------------------------------
 
 
function css_hack() {
/*
 Presumably, you have CSS to set the font size and color. Let's call this rule 'base'.
 It looks like this:
 
 base { color: #808080; font-size: 12px; font-style: normal; }
 
You change the base rule like this:
 
 var new_rule = 
     [
         {'rule':'base','attr':'color', 'valu':'#286ea0' },
         {'rule':'base','attr':'fontSize', 'valu':'18px'; }
     ];
     change_css(new_rule);
 */
	var new_rule = [];
	
	if (mode == 0) { /* 'normal' mode */
		new_rule.push({'rule':'base','attr':'color','valu':'#ff0000'});
		new_rule.push({'rule':'base','attr':'fontSize','valu':'48px'});
		new_rule.push({'rule':'base','attr':'fontStyle','valu':'normal'});
	}
	else { /* changed mode */
		new_rule.push({'rule':'base','attr':'color','valu':'#0000ff'});
		new_rule.push({'rule':'base','attr':'fontSize','valu':'14px'});
		new_rule.push({'rule':'base','attr':'fontStyle','valu':'italic'});
	}
	mode = ((mode == 0) ? 1 : 0);
	change_css(x);
	document.getElementById('cmd_css').value = 'Change CSS (' + mode + ')';
}
 
</script>

Open in new window

0
 
BadotzCommented:
Try using:

document.getElementById

instead of only:

getElementById
0
 
CodedKAuthor Commented:
No, nothing.
I've also tried using a script, function... But the only things Firefox can do is change colors...
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
BadotzCommented:
If you put the font sizing before the color changing, what happens?
0
 
CodedKAuthor Commented:
If i put only font sizing alone ... nothing...
If i put it first also nothing.
Anything else except font color wont work !
0
 
BadotzCommented:
This link discusses a different approach:

http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml
0
 
CodedKAuthor Commented:
Sorry Badotz, i'm not that advanced.
I cant understand how to implement this.
0
 
CodedKAuthor Commented:
Thank you very much for your time and effort.
Give me some time to apply this and aword the points :)
0
 
CodedKAuthor Commented:
Thank you Badotz.

Sorry for the delay. I didnt find any time to check it earlier ... :)
Anyway thank you very much.
0
 
BadotzCommented:
No worries - glad to help.
0
All Courses

From novice to tech pro — start learning today.