[jQuery] Increase / Decrease Font Size

[Dan Vega]

I am using the following code to allow the user to increase / decrease
the font size  of the document. I have tested it in many browsers and
in all of the following it comes back with a starting font size of
16px.

Firefox 3.0.8
Google Chrome 1.0.1
Safari Win 4 Public Beta

In IE 6/7 the font size is always coming back 1243px. Why is there
such a difference and is there anyway to get around this besides hard
coding the starting size?


<script type="text/javascript" language="javascript">
$(document).ready(function(){

        var originalFontSize = getFontSize();

        $(".resetFont").click(function(){
                setFontSize(originalFontSize);
                $("#changeFont").fadeToggle("fast");
                return false;
        });

        $(".increaseFont").click(function(){
                var fontSize = getFontSize();
                var newFontSize = fontSize + 1;
                setFontSize(newFontSize);
                return false;
        });

        $(".decreaseFont").click(function(){
                var fontSize = getFontSize();
                var newFontSize = fontSize - 1;
                setFontSize(newFontSize);
                return false;
        });

});

function getFontSize() {
        var currentSize = $("html").css("font-size");
        var currentSizeNumber = parseFloat(currentSize, 12);
        if(currentSizeNumber > 20) {
                currentSizeNumber = 20;
        }
        return currentSizeNumber;
}
function setFontSize(size) {
        $("html").css("font-size", size);
}
</script>