slider position problem after insert in a dialog, in IE7

slider position problem after insert in a dialog, in IE7

Hello, 

I try to insert a slider in a dialog, but when I scroll, the slider stays in a fixed position. I saw in firebug the problem is that the slider have position relative and de dialog uses position absolute, this problem just happens in IE7, someone have a solution? 
I reinforce that problem is in the css Jqueryui and i don't know if i can solve via script

Follows the code below

thanks,

Filipe Santana

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>jQuery UI Example Page</title>
    <link type="text/css" href="css/custom-theme/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript">
    $(function(){
    // Dialog Link
    $('#dialog_link').click(function(){
    $('#dialog').dialog('open');
    return false;
    });

    // Dialog
    $('#dialog').dialog({
    autoOpen: false,
    height: 200,
    buttons: {
    "Ok": function() { 
    $(this).dialog("close"); 
    }, 
    "Cancel": function() { 
    $(this).dialog("close"); 
    } 
    }
    });
    // Slider
    $('#slider').slider({
    range: true
    });
    });
    </script>
    <style type="text/css">
    /*demo page css*/
    body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
    .demoHeaders { margin-top: 2em; }
    #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
    #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
    ul#icons {margin: 0; padding: 0;}
    ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
    ul#icons span.ui-icon {float: left; margin: 0 4px;}
    </style>
    </head>
    <body>
    <!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
    <h2 class="demoHeaders">Dialog</h2>
    <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
    <!-- ui-dialog -->
    <div id="dialog" title="Dialog Title">
    <!-- Slider -->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <div id="slider"></div>
    <p>Duis sapien metus, gravida porta eleifend quis, convallis quis erat. Proin pharetra facilisis sapien eu vulputate. Pellentesque justo lorem, ultrices id scelerisque sed, congue eget purus.</p>
    </div>

    </body>
    </html>