Problem en IE and slider Handle height

Problem en IE and slider Handle height

Hi all,

I'm new in JQuery and plugin.
I'm trying to customize the slider and especially the Slider Handle

Here my code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery-ui.js"></script>
        <script type="text/javascript" src="jquery.ui.core.js"></script>
        <script type="text/javascript" src="jquery.ui.widget.js"></script>

        <script type="text/javascript" src="jquery.ui.mouse.js"></script>
        <script type="text/javascript" src="jquery.ui.slider.js"></script>

        <link href="style.css" rel="stylesheet" type="text/css" />
        <link href="jquery-ui.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" >

        $(document).ready(function() {
                $(function() {
                    $("#slider").slider( {
                        slide : function(event,ui) {
                            $("#debug").val(ui.value);
                            var h = $("#textscroll").height();
                            var deltatext = - Math.round((ui.value /100 )* h ) ;
                            $("#textscroll").css("top",deltatext );

                        },
                        orientation : 'vertical'
                    });
                });
        }
        ) ;

        </script>


      </head>
      <body>
          <br>
          <div class="demo" >
              <div id="slider" style="height:100px;"></div>
             un text pour voir
          </div>

    <input type="text" value="" id="debug"/>
      </body>
    </html>

















































and the css
  1. .ui-slider { position: relative; text-align: left; }
    .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 10px; height:2px;  cursor: default; background-image: none ; }
    .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: 5px; display: block; border: 0; background-position: 0 0; }

    .ui-slider-horizontal { height: 3px; }
    .ui-slider-horizontal .ui-slider-handle { top: -3px; margin-left: 0px; }
    .ui-slider-horizontal .ui-slider-range { top: 0; height: 10px; }
    .ui-slider-horizontal .ui-slider-range-min { left: 0; }
    .ui-slider-horizontal .ui-slider-range-max { right: 0; }

    .ui-slider-vertical { width: .8em; height: 100px; }
    .ui-slider-vertical .ui-slider-handle { left: 0; margin-left: 0; margin-bottom: -.6em; }
    .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
    .ui-slider-vertical .ui-slider-range-min { bottom: 0; }
    .ui-slider-vertical .ui-slider-range-max { top: 0; }













My problem is this one :

On firefox, no problem, I can modify the height of the handle.

but on IE, The height of the handle is not set, it's always the same height. and I can't  change it.

If someone have an idea of the problem ....

you can see the file :
-screenshot 33 is under IE
- screenshot 34 is under firefox

thanks in advance