Div resizes when using jQuery UI tabs

Question

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:

...all required includes...
<script type="text/javascript">
$(function(){      
      $('#tabs').tabs({             
            remote: true,            
            spinner: '<em>Loading...</em>'
      });
});
</script>

<div id="tabs">                
      <ul>                    
            <?                    
            echo "<li><a href='map.php' onclick=''><span>".get_text('Map')."</span></a></li>";
            echo "<li><a href='admin_realestate.php'><span>".get_text('Admin - Buildings')."</span></a></li>";
            echo "<li><a href='admin_geo.php'><span>".get_text('Admin - Geo')."</span></a></li>";
            echo "<li><a href='admin_users.php'><span>".get_text('Admin - Users')."</span></a></li>";
            ?>
      </ul>
</div>
...Container div...

The map.php page loads a yahoo map.When loading the map without the jquery ui tabs, it displays properly.

<style>
.map_class
{
    width: 900px;
    height: 450px;
    border: .2em dotted #900;
}
</style>
<div align='center'>
<table align='center' width='100%'>
    <tr>
        <td align='center'>
            <div id='div_test'>
            test</div>
            <div id="main_map" class='map_class'></div>
        </td>
    </tr>
    <tr>
        <td align='center'>
            <div id='real_e_table' align='center'>
                <br />
            </div>
        </td>
    </tr>
</table>
</div>

<script type="text/javascript">  
      var main_map = new YMap(document.getElementById('main_map'));      
      main_map.addTypeControl();    
      main_map.disableKeyControls();
      main_map.addZoomLong();
      main_map.addPanControl();  
      main_map.setMapType(YAHOO_MAP_SAT);
      main_map.drawZoomAndCenter("Montreal, QC", 16);
</script>