border around a flash object

can't seem to get rid of it

[lorax]

I've got a flash object that sits in a div (on the left and using embed). The div has a background image which you can see to the right after at the end of the flash object. The two should seem like a seamless horizontal image. Problem is that there's a border around the flash object that I can't seem to get rid of. I've tried styling the

object {border: 0 none; margin:0; padding:0}

and even applied the same using an id on the object.

Other ideas?

[penders]

Hi, it should be possible to have a seamless effect with no border. However, which browsers are you testing this in? In IE you often get a border around the flash object until you click on it to activate it?

Are you sure there's no border in the flash movie itself?! :)

Presumably your EMBED tag is inside your OBJECT for the benefit of IE, which is then inside a containing DIV, ...which is then inside another DIV?

Are you sure your flash object is completely filling the container? Or maybe if the flash object is a slightly different aspect ratio to the container (DIV) then you could get a thin border on two of the sides?

Is the 'border' on all sides?

[lorax]

Hi penders,
re: ff & ie
No bord in IE (<param name="wmode" value="transparent" /> worked great for this) - border shows up in FF only. And it goes all the way around the object.

Code (specifics removed):

<div id="banner">
<object classid="the code base str" codebase="macromedia url" width="464" height="248">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="theflashfile.swf" />
<param name="wmode" value="transparent" />
<param name="quality" value="high" />
<param name="scale" value="exactfit" />
<embed src="theflashfile.swf" quality="high" bgcolor="#ffffff" width="463" height="248" name="playme" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="another macromedia url" />
</object>
</div>

The styles

img,object {
display: block;
border-collapse: collapse;
border: 0 none;
}
#banner {
background-image: url(imgs/banner.jpg);
background-position: left;
background-repeat: no-repeat;
}

I've tried defining the height of the div and expanding the object embed and object size but it didn't work.

Oh and no, there's no border in the flash file :)

[Marshall]

Instead of border: 0 none, did you try:

border: none;
border-width: 0;

And I am not sure if this is proper, but how about:

border-color: transparent;

Just a thought.

Marshall

[lorax]

Was worth a try but it didn't work.

[Marshall]

Check these threads

[webmasterworld.com...]

[webmasterworld.com...]

Marshall

[lorax]

Thanks Marshall,
I saw that javascript solution but the client prefers to not have any javascript. As I understand it, that solution is for problems with IE. My issue is with Firefox - (never thought I'd say that). It's just an oddity and it must be something simple.

[lorax]

geesh.... found it.

The embed code ALSO needs to have the wmode set like so:

wmode="transparent"

Thanks folks.

[penders]

Glad you got it sorted.

Just in case anyone is reading this thread and is perhaps confused by a comment/mistake in my post above and the eventual solution...

Presumably your EMBED tag is inside your OBJECT for the benefit of IE...

When the EMBED tag is inside the OBJECT element like this, it is for the benefit of FF, not IE! (oops)