Search code examples
cssflashgoogle-chromebackgroundembed

White background surrounding the flash <embed> tag in Google Chrome

A picture is worth a thousand words and so I'll start off with it

White background around embed tag

As you can see, there is white background appearing in Chrome while in Firefox, the movie fits perfectly.

Here is the embed code:

<embed id="movie" src="movie.swf" loop="false" menu="false" quality="best" 
bgcolor="#ffffff" width="250" height="250" scale="aspect" name="movie" 
align="middle" allowscriptaccess="always" allowfullscreen="false" 
type="application/x-shockwave-flash" 
pluginspage="http://www.macromedia.com/go/getflashplayer" 
flashvars="shutter_enabled=1&amp;shutter_url=shutter.mp3&amp;width=250&amp;
height=250&amp;server_width=250&amp;server_height=250">

For the time being, I've used bgcolor=#e0efe8 to merge it with background. But what I'm curious about is why doesn't the movie fit perfectly as it does in Firefox?

I tried to look at css but right clicking over it brings up the flash settings menu. The embed tag is withing a td and the table has cellspacing = "4" and cellpadding = "3", but I don't think that would cause a problem. The table, tr, or td doesn't have a height property defined so I guess we can tick that off of 'to check' list too.

Is there anything else from my side that needs to be provided to come up a solution?

UPDATE

Throwing in the HTML too if that helps:

<table width="100%">
    <tbody>
        <tr>
            <td>
                <embed id="movie" src="movie.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" scale="aspect" name="movie" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="shutter_enabled=1&amp;shutter_url=shutter.mp3&amp;width=250&amp;height=250&amp;server_width=250&amp;server_height=250" align="middle" height="250" width="250">
             </td>   
        </tr>
    </tbody>
</table>

Finally managed to view the CSS through Firebug lite. Here is the SS:

CSS

Thanks in advance

Solution

  • We'll need to have a look at your CSS file or inline style code, have you tried setting the td padding property to zero?

    CSS code:

    td {
    padding: 0;
}

    Edit1: If that doesn't work, maybe this css property:

    border-collapse: collapse

    Edit2: Try using these CSS properties:

    position: relative;
overflow: auto;

    Source (someone else having a similar problem): http://productforums.google.com/forum/#!topic/chrome/2EqmQiwApz4