I'm having a strange issue with Firefox putting a ~5px bottom margin on an embedded flash file. I'm using Blueprint CSS & there is no styling on these sections other than what Blueprint puts on them. Here are two screenshots:

Safari http://screencast.com/t/NjFjMDA4MzU

Firefox http://screencast.com/t/M2E4MjQxMjk

I'm not very experienced with embedding flash so perhaps that's where my issue lies. Here's the embed code I'm using:

<object width="270" height="210">
<param name="movie" value="/swf/slideshow.swf">
<embed src="/swf/slideshow.swf" width="270" height="210">

Would greatly appreciate any help!

  • Can we see the HTML and CSS that pertains to the element that contains the embed as well? Dwayne Anderson almost 8 years ago

3 answers

Doug 1095
This was chosen as the best answer

This is caused by Firefox adding space for text descenders. For example, if an object (same applies to inline images) were inline with some text, and that text had letters with descenders, like 'y' or 'g', the object would be aligned with the baseline of the text, and the descenders would extend below the baseline, into that gap you observe.

To prevent this, there are two options:

  • Float the object within the parent div (if your layout allows it).
  • Use CSS to change the vertical-align of the object to "bottom," "middle" or "top." All three values change alignment to be relative to the containing box rather than the text. It's likely they will give you identical results.

object { float:left; /* or */ vertical-align:middle; }

Answered almost 8 years ago by Doug

Yes, Thank you Doug, much appreciated. I was thinking I was missing something in my CSS but that explains it perfectly. I used the vertical-align:top instead of Float which I would of had to clear later on down the page.

Answered about 7 years ago by Jason McWhorter

Floating it worked perfectly. Thanks Doug!

Answered almost 8 years ago by Axel Anderson