javascript font-resizer not working in IE8 or IE7

Question

I'm trying to create a site-wide font resizer, but most of the implementations seem to want me to target elements by id or class, instead of site-wide.

I'm trying to do accomplish my task by setting up my pages starting with this CSS:

• html = 83%
• body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,th,td,etc... = 1em

Then, I have some jquery that grabs the currently applied font-size, increases it and re-applies it.

But it's not working in IE8 or IE7. (shocker)

var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.05;
$("html").css('cssText', 'font-size: ' + newFontSize + 'px !important');

If I console.log out the values, it's computing fine in those browsers, but there seems to be something about relative font sizing in those browsers. I also tried resetting everything to 100%, instead of 1em, but that didn't work, either.

Example jsfiddle (but this site doesn't work in ie8 or below.....)

Answer 1

You are applying the size without any unit. Add px to the size:

$('html').css('font-size', newFontSize + 'px');

---

Side note: the parseFloat function doesn't take any radix parameter:

var currentFontSizeNum = parseFloat(currentFontSize);

Answer 2

I couldn't get it to work in IE8 & IE7, so I changed my code to apply a class to the html object (body would work, too). Then, in the IE8 & IE7 css files, I have styles that are listening for those classes and adjust their sizes, accordingly.