Flash overlaps HTML objects when page zooms in (ctrl+)

[Blaise.M]

Hi everyone,

I am working on an interface that is currently divided into two sections #content-left and #content-right. Above the two sections, I have a navigation bar. All works fine when I only use html elements, however, things start to go wrong when I add a flash movie to the #content-left section; If I zoom in using ctrl+, the flash overlaps the #content-right section. The flash is embedded into a table, and it pushes the border to go over #content-right. Below is a snippet of the code:

<!-- html -->
<div id="content-left">
  <table width="100%" align="left" border="1" cellspacing="0" cellpadding="1">
    <tr>
      <td width="100%">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="750" height="275" title="intro">
        <param name="movie" value="flash/first-entry.swf" name="wmode" value="transparent" />
        <param name="quality" value="high" name="wmode" value="transparent" />
        <embed src="flash/first-entry.swf" quality="high" wmode="transparent" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="675" height="275"></embed>
        </object>
      </td>
    </tr>
    <tr>
      <td width="100%">
        Text goes here
      </td>
    </tr>
  </table>
</div>

<div id="content-right">
  <table width="90%" align="right" border="0" cellspacing="1" cellpadding="1">
    <tr>
      <td width="1%" bgcolor="#605D5C">
        <img src="images/shim.gif" alt="vLine" width="1" height="1"/>
      </td>
      <td width="10%">
        <img src="images/shim.gif" alt="tSpace" width="1" height="1"/>
      </td>
      <td width="88%">
        <b><i><font face="Verdana" size="4">News and Events</font></i></b>
        <p style="margin-top:5px;">
          <a class="NewsNAVLinks" href="#">link-1</a> <br />
          <a class="NewsNAVLinks" href="#">link-2</a><br />
          <a class="NewsNAVLinks" href="#">link-3</a> <br />
        </p>
      </td>
      <td width="1%" bgcolor="#605D5C">
        <img src="images/shim.gif" alt="vLine" width="1" height="1"/>
      </td>
    </tr>
  </table>
</div>


<!-- CSS -->

body {
    height:100%;
    width: 80%;
    margin: 0% 10% 0% 10%;
    background-color: #FFFFF0;
    font-family: Arial,Helvetica,sans-serif;
}

#content-left {
    float: left;
    margin: 0px;
    width: 70%;
    height: 100%;
    margin-top: 10px;
    font-size: 13px;
    color:#646565;
}

/* content-right; a table located to the right of the page */
#content-right {
    float: right;
    width: 30%;
    height: 100%;
    margin-top: 20px;
}

How can I fix this?