Databases
StackOverflow2013
Postsdbo
POFlash object/embed breaks layout
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFlash object/embed breaks layout
    text
    copied!<p>EDIT: I ended up resorting to <code>td { max-width: 460px; }</code>, which solved the immediate problem in both IE and FF. Still curious though about the cause of this layout behaviour.</p> <p>I'm working on an existing page which uses a table layout of two columns. In a cell in the left one, there is an ordinary <code>&lt;object&gt;&lt;param /&gt;&lt;param /&gt;&lt;embed /&gt;&lt;/object&gt;</code> snippet embedding a flash map (<a href="http://backspace.com/mapapp/" rel="nofollow">http://backspace.com/mapapp/</a>):</p> <pre><code>&lt;object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="zoom_map" style="display: block !important;" height="251" width="460"&gt; &lt;param name="movie" value="/[path]/world.swf?data_file=/[path]/data.xml"&gt; &lt;param name="quality" value="high"&gt; &lt;param name="bgcolor" value="#FFFFFF"&gt; &lt;embed src="/[path]/world.swf?data_file=/[path]/data.xml" quality="high" bgcolor="#FFFFFF" name="Clickable World Map" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" style="display: block !important;" title="Adobe Flash Player" align="top" height="251" width="460"&gt; &lt;/object&gt; </code></pre> <p>The problem is that in IE 9 and FF 21.0, even though both the object and the embed seem to be exactly the intended 460px wide when inspecting with Firebug or IE's dev tool, the table column becomes significantly wider. When using Firebug in FF to delete the embed, the map disappears but the layout does not change. When also deleting the object, the column shrinks to the indended width. </p> <p>I read somewhere that <code>display: block</code> sometimes fixes issues like this, but that is already in place and doesn't seem to help. In Chrome everything is fine, i.e. there is no additional space to the right of the map.</p> <p>I have tried setting the width in the style attribute. I have also tried wrapping the whole thing in a div with a width of 460px and overflow: hidden, but also to no avail.</p> <p>I seem out of luck googling the issue so I'm hoping someone will be able to help. Thanks in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload