FIXED! scrollbar in .loaded content not showing in opera.

FIXED! scrollbar in .loaded content not showing in opera.

THIS WAS FIXED
> I found out that the error was that I my width of 100% were not fully nested. I 
changed 
#results, #results2 {
to 
#results, #results2, #resultscontent {

and all was fine.

below is original post, for future reference.

thanks to anyone who looked at the this...

-------------------------------------------------------------------------------------------
Thanks i nadvance for any help.

I am loading some external content into a div using .load() and the content should overflow the container and generate scrollbars, which it does in explorer but not opera.
Dragonfly opera's debugger seems to be reporting all the correct information for the height, scrolling, etc.
I have tried variously setting the overflow to scroll and auto and the bar shows, but it has no scroller...no button...just a blank scrollbar.

Below is a reduction of what I am using to its bare miinmum, except I ahve left in the part related to the layout plugin, since whatever solution I find has to work with that.

The file the link loads is irrelevant. In my case is is part of an html fle on my server and within a div called content. Any cotennt will do as long as it overflows...scrolls show in explorer, not in opera.

a note:
the link in the html shows a target of contentFrame, but that is overridden by the prevent default in the function that traps the link ($("a.nav")....ignore this.

If anyone as any suggestions about where the problem might be, I would be most grateful. Just a hint is probably all I need....

I tried to attach the file, but the forum wont let me, so...

  1. <!DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <HTML >
    <HEAD>
    <TITLE>ChocoChoco Eigo Dan Home Page</TITLE>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.layout.js"></script>

    <script type="text/javascript" >

    jQuery.noConflict();


    jQuery(document).ready(function($) {

    lasthref ="";

    $('a.navbutton').bind("click", function(event) {
    event.preventDefault();
    $this = $(this);
    // dont reload same content as last time
    if (!($this.attr("href") == lasthref )) {
    $("#results").load($this.attr("href") +" #content");
    //update last reference
    lasthref = $this.attr("href")
    }
    });

    // below is script just for layout. ignore from here...

    outerlayout = $('#container').layout({
    west__size: 220,
    south__size: 20
    });
    // this is right frame which is without the center layout above
    //-- has 2 subframes, north and center
    rightLayout = $('div.ui-layout-center').layout({
    center__paneSelector: ".middle-center"
    ,
    north__paneSelector: ".middle-north"
    });



    });
    </script>

    <style>

    /* this is the styling of the results div */
    #results, #results2 {
    width:100%; height:100%;
    position: relative;
    right:0;
    overflow: auto ;
    }



    /* below is styling just for the layout. */
    html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: auto; /* when page gets too small */
    }
    body {
    background: #FFDDEE;
    }


    /*
    * #verticalCenteringWrapper
    *
    * This is an example of a pure CSS solution for vertical centering
    * It works well when dealing with a fixed-height container
    * However if you just want a 'margin' at top and bottom,
    * then you could use an absolutely positioned div with top & bottom settings,
    * or use an extra wrapper-layout as described in more detail below.
    */

    #verticalCenteringWrapper {
    background: transparent; /* for easier visualization
    width: 100%;
    height: 1px;
    top: 50%;
    position: absolute;*/
    }
    #container {
    background:transparent;
    height: 100%;
    /* position: relative;*/
    width: 100%;
    /*max-width: 900px;*/
    min-width: 500px;
    _width: 700px; /* min-width for IE6 */
    /* margin: -250px auto 0; top-margin = height/2 */
    }

    #container {
    position: absolute;
    top: 0%;
    left: 0%
    }

    .ui-layout-pane {
    /* background-color: red;whole area doesn't include footer or right margin
    ... for easier visualization */

    }

    .pane {
    display: none; /* will appear when layout inits */
    }


    #content {
    /* margin-bottom: 5px; */
    /* padding-bottom: 0px;*/
    }

    #content IFRAME {
    width: 100%;
    border:0;
    background:transparent;
    }

    #navbar {
    /*width:200px; */
    height:600px;
    background: transparent;
    margin: 5px;
    padding: 5px;
    text-align: center;
    }

    /*select {*/
    /* background-color: ivory;*/
    /* border: dotted 1pt blue;*/
    /*}*/



    </style>

    </HEAD>

    <BODY>

    <div id="container" >
    <div class="pane ui-layout-west">
    <div id="navbar" style="">
    <ul id="blobs">

    <li id="kurasublob4"><a class="nav navbutton " href="Kurasu.html" target="contentFrame" >kurasublob4</a></li>
    </ul>


    </div>
    </div>
    <div class="pane ui-layout-south">southstuff
    </div>

    <div class="pane ui-layout-center" >
    <div class="middle-north" id="middle-north">
    </div>
    <div class="middle-center" id="middle-center">
    <div id="resultscontent" >
    <div id="results" style="">
    <div id="content">
    test
    </div>

    </div>
    </div>
    </div>
    </div>

    </div>

    </BODY>
    </HTML>