Resize event doesn't work in firefox

Resize event doesn't work in firefox

Hi,

I'm fighting with the following problem. I'm new to jQuery so everything is a bit blurry. I have some programming experience with as3, but jQuery is although better, quite new for me. 

The problem is as follows: 
I have a css sheet with 3 different body classes .large, .medium, .small which is added at body on resize depending on window.size. Everything is working fine in Safari, Opera and Chrome. Only firefox is what kills me now. 

  1. The code:// JavaScript Document

    function checkWindowSize() {
        var width = $(window).width(),
        new_class = width > 1800 ? 'large' :
                    width > 1280 ? 'medium' :
                    width > 0 ? 'small' : '';
    alert("resizing")
        $(document.body).removeClass('large medium small').addClass(new_class);
    }

    $(window).resize(checkWindowSize); 
    $(document).ready(checkWindowSize);
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7. <title>Untitled Document</title>
  8. <script src="js/jquery-1.5.min.js" type="text/jscript"></script>
  9. <script src="js/resize.js" type="text/jscript"></script>

  11. <link href="style/layout.css" rel="stylesheet" type="text/css" media="all" />

  13. </head>
  14. <body>
  15. <div id="page_wrapper">
  16. <div id="menu_wrapper">

  18. <div id="menu_container">
  19. <ul>
  20.     <li><a href="#inspiratie">inspiratie</a></li>
  21.     <li class="blue">/</li>
  22.     <li><a href="#hout">hout</a></li>
  23.     <li class="blue">/</li>
  24.     <li><a href="#kemperink">kemperink</a></li>
  25.     <li class="blue">/</li>
  26.     <li><a href="#contact">contact</a></li>
  27.     </ul>
  28. <div id="top"></div>    
  29. </div>

  31. <div id="logo_container">
  32. <a href=""><img src="images/logo.jpg" alt="Kemperink | Inspirators in Hout" /></a>
  33. </div>
  34. </div>

  36. <div id="content_wrapper">content</div>
  37. </div>

  39. </body>
  40. </html>
  41.  
  42. #body{margin:auto;font-family:"Helvetica Neue", Arial;height:100%;   overflow:auto;}



  46. /*Sets up content and menu*/
  47. #page_wrapper{width: 1200px; height:auto; margin:auto;}
  48. #menu_wrapper{width:1200px; height: 70px; top:0; background:#09F; position:fixed; z-index:2;}
  49. #content_wrapper{width:1200px; height:5000px; margin-top:70px; z-index:1;}

  51. .large #page_wrapper {width:1550px;height:5000;margin:auto;}
  52. .large #menu_wrapper {height:70px;z-index:2;top:0px;position:fixed; background:#FFFFFF; width:1550px}
  53. .large #content_wrapper{z-index:1;margin-top: 70px;position:absolute;height:5000px;}
  54. .medium #page_wrapper {width:1250px;height:2500;margin:auto;}
  55. .medium #menu_wrapper {height:70px; x;z-index:2; top:0px; margin-top:0; padding-top:0; position:fixed; background:#9F0; width:1250px}
  56. .medium #content_wrapper{z-index:1;margin-top: 70px;position:absolute;height:5000px;}
  57. .small #page_wrapper {width:1024px;height:2500;margin:auto; min-width:1000px}
  58. .small #menu_wrapper {height:70px;z-index:2;top:0px;position:fixed; background:#666; width:1000px;}
  59. .small #content_wrapper{z-index:1;margin-top: 70px;position:absolute;height:5000px;}

Any help would be much appreciated!

Thanks in advance