JQuery UI Dialog Scrollbars not Showing on Internet Explorer 8

JQuery UI Dialog Scrollbars not Showing on Internet Explorer 8

Hello to everyone.

I have a modal dialog set on an iframe using JQuery UI showing a separate page. When the page content height is bigger than the dialog height the scrollbars kind of show up in Firefox although a bit far to the right, when I use Internet Explorer 8 or Chrome they do not show tho. My code goes as follows:

Libraries caller code:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>  
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

Code to open the dialog in a separate .js file:

    function showRegDialog(url) {
        idNro = Math.floor((Math.random() * 1500) + 1);
   
        $(function () {
   
            var horizontalPadding = 0;
            var verticalPadding = 0;
   
            $('<iframe id="externalSite' + idNro + '" scrolling="no" frameborder="0" padding="0" margin="0" style="overflow:auto" class="externalSite" src="' + url + '" />').dialog({
                open: function () {
                    $(this).siblings('.ui-dialog-titlebar').remove();
                },
                title: false,
                autoOpen: true,
                width: 750,
                height: 700,
                modal: true,
                resizable: false,
                draggable: false,
                autoResize: false,
                overlay: {
                    opacity: 0.5,
                    background: "black"
                }
   
            }).width(550).height(700);
   
        });
    }

The opener page has:

    <style type="text/css">      
    html {overflow : visible}
    </style>
    <body>
    <ul>
    <li><a href="javascript:showRegDialog('view_edit.aspx?c=1');"> Edit<img src="images/btn/edit_pv.png" align="Absbottom" border="0"/></a>               
    </li>
    </ul>
    <!--...-->
    </body>

The separate content page has:

    <style type="text/css">      
   
    html {overflow : visible}
   
    .viewEdit
    {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px
    }
   
    .viewEditForm
    {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px
    }
   
    .viewEditMainDiv
    {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px
    }
   
    </style>   
   
    <body class="viewEdit" style="overflow:visible">
    <form id="form1" class="viewEditForm">
    <div class="viewEditMainDiv">
    <!--...-->
    </div>
    </form>
    </body>

How can I make those scrollbars show on IE and Chrome?. I have done a decent amount of research and seems that `overflow:visible` or `overflow:auto` would do the trick but this hasn't worked for me yet. Could it be a bug on jquery-ui version if so How can I fix it?.

Thanks a lot for your time and help.