Div resizes when using UI tabs

Div resizes when using UI tabs

Hi folks,

I hope we can find a way to fix the problem I'm experiencing.

Problem: One of my divs (id='main_map' in the map.php page) does not display with the height and width specified in my css. However, when it first loads the page/tab, the div has the right size but not when I click on the tab (map tab).

I'm using jquery-ui.js and php. I have 4 tabs displayed in this fashion in the page_header.php:
  1. ... all required includes...
  2. <script type="text/javascript">
  3. $(function(){     
  4.       $('#tabs').tabs({            
  5.             remote: true,           
  6.             spinner: '<em>Loading...</em>'
  7.       });
  8. });
  9. </script>

  11. <div id="tabs">               
  12.       <ul>                   
  13.             <?                   
  14.             echo "<li><a href='map.php' onclick=''><span>".get_text('Map')."</span></a></li>";
  15.             echo "<li><a href='admin_realestate.php'><span>".get_text('Admin - Buildings')."</span></a></li>";
  16.              echo "<li><a href='admin_geo.php'><span>".get_text('Admin - Geo')."</span></a></li>";
  17.             echo "<li><a href='admin_users.php'><span>".get_text('Admin - Users')."</span></a></li>";
  18.             ?>
  19.       </ul>
  20. </div>
  21. ...Container div...

The map.php page loads a yahoo map.When loading the map without the jquery ui tabs, it displays properly.
  1. <style>
  2. .map_class
  3. {
  4.     width: 900px;
  5.     height: 450px;
  6.     border: .2em dotted #900;
  7. }
  8. </style>
  9. <div align='center'>
  10. <table align='center' width='100%'>
  11.     <tr>
  12.         <td align='center'>
  13.             <div id='div_test'>
  14.             test</div>
  15.             <div id="main_map" class='map_class'></div>
  16.         </td>
  17.     </tr>
  18.     <tr>
  19.         <td align='center'>
  20.             <div id='real_e_table' align='center'>
  21.                 <br />
  22.             </div>
  23.         </td>
  24.     </tr>
  25. </table>
  26. </div>

  28. <script type="text/javascript"> 
  29.       var main_map = new YMap(document.getElementById('main_map'));     
  30.       main_map.addTypeControl();   
  31.       main_map.disableKeyControls();
  32.       main_map.addZoomLong();
  33.       main_map.addPanControl(); 
  34.       main_map.setMapType(YAHOO_MAP_SAT);
  35.       main_map.drawZoomAndCenter("Montreal, QC", 16);
  36. </script>