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

Blaise.M 0 Newbie Poster

15 Years Ago

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?

1 Contributor
0 Replies
210 Views

Dani AI

Generated 7 Months Ago

Short answer: the Flash is rendering in a "windowed" mode and/or using fixed pixel sizing, so it won't obey the page flow when the page is zoomed. In your markup the wmode parameter is malformed and the object/embed pixel widths don't match your percentage layout — that combination commonly produces the exact overlap you're seeing.

Practical fixes to apply (one change at a time and retest):

Make the SWF windowless: add a proper wmode param inside the object and the same attribute on the embed tag (opaque is a good default; use transparent only if you need true transparency).
Make the SWF fluid: use width="100%" (or CSS max-width:100%) on the object/embed so it scales with #content-left instead of staying a fixed pixel width.
Contain overflow: wrap the SWF in a container and use overflow:hidden so the plugin can't visually push into the right column.
Clean the markup: fix the malformed <param> tags (no duplicate attributes) or use a small embed helper (SWFObject) to inject params cleanly.

Example (replace your current embed — this is intentionally different from your original snippet):

<div class="flash-wrap" style="max-width:750px; overflow:hidden;">
  <object data="flash/first-entry.swf" type="application/x-shockwave-flash" width="100%" height="275">
    <param name="movie" value="flash/first-entry.swf" />
    <param name="wmode" value="opaque" />
    <param name="quality" value="high" />
    <embed src="flash/first-entry.swf" wmode="opaque" width="100%" height="275" quality="high" type="application/x-shockwave-flash"></embed>
  </object>
</div>

#content-left .flash-wrap, #content-left object, #content-left embed { max-width:100%; box-sizing:border-box; display:block; }

Notes and troubleshooting: ensure a standards DOCTYPE so percentage layouts behave predictably; prefer opaque over transparent for performance; check computed widths in dev tools (zoom can reveal a fixed-width element); test in another browser to confirm wmode is being applied. If you plan long-term support, consider replacing Flash with an HTML5/JS solution since Flash is deprecated.

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.