jquery UI portlet inside tab - out of boundary problem

Question

I am using jquery UI tab, and one of the tab panels contains the UI portlets.

The problem is that the portlets are not inside the tab boundary, here is a screen shot: http://pic20.picturetrail.com/VOL22/543225/792958/384422925.jpg

here is the main page

http://codepad.org/fQRxsosu

here is the include file for the portlets, newPortlets.html which is essentially the example from jquery ui docs.

http://codepad.org/kAlT9CAy

the tab containing the portlet will be ultimately created dynamically.

i have been looking at the markup, etc using firebug and there is no error.

tia for any help!

Answer 1

it looks like height problem ... and it maybe because of the position : absolute; of the portlet contents...

Answer 2

I solved the problem this way:

#mytabs{float:left;margin:2px;}

/*Safari hack*/
@media screen and (-webkit-min-device-pixel-ratio:0)  {   
  #mytabs{margin:2px 8px 2px 2px;width:99%;}  
}

/* Firefox hack */  
@-moz-document url-prefix() {
....
}