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:
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"> </embed> </object>
Would greatly appreciate any help!
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.
/* or */
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.
Floating it worked perfectly. Thanks Doug!