I am getting an unexpected space between my graphics with I use the “object” tag to embed Flash movies.

Posted March 17, 2005

Rothe Blog A List Apart Logo
I had come across a problem in one of our clients sites the other day. I noticed that there was an ugly space between two tables, the top table containing a small flash movie intro, and the bottom table containing content.

Naturally I thought I would double check the padding margin in any classes involved in the table rows or tables themselves. But the only declarations I used in the styles were for background properties. I could not for the life of me figure out what was going on, and after the rough week I had had this week with strange CSS problems, I thought I was losing my mind. But working backwards I figured out the problem.

When I removed the <object> tags from the embedded Flash movie, the gap disappeared in Mozilla Firefox, which was my problem browser.

First off, I decided to set the margin and padding of the <object> element to 0 like so;

object {
margin:0;
padding:0;
}

But after that did not work, I decided “When in doubt, make it xhtml compliant”. I made sure that this section of the site was xhtml compliant code, all the css was written in shorthand as much as possible for loading considerations, and I replaced the containing table with a div container instead.

Then, to make sure that every part of the site was xhtml compliant, I decided for the second time to use the “Satay Method” from Alistapart.com. I had used this on EVSMinder.com to make that a fully compliant CSS website and had good success. But I still have my reserved feelings about using it for large amounts of Flash on any given site.

I wrote about the method a little while back which you can find in the Flash section. But basically what it says to do, is to get around using the proprietary <embed> by using certain attributes of the <object> tag and “param” data combined with loading the final Flash movie into a container .swf of the same size. It should load quickly since the container will have nothing in it and will be around 1k.

As soon as I set this up and removed the duplicate tag, or as the Satay Method calls it - twice baked, (embed vs. object) the gap disappeared.

It was the end of the day, I didn’t get to research this, but I intend to, and I intend to follow up.

But if I am lucky enough to have any of the design community read this, hopefully they could post a comment with an explanation about this problem I was having.