On 8/31/05, Jessica Mays <[EMAIL PROTECTED]> wrote:
> I have a flash swf movie that when viewed in IE there is no gap
> between the flash movie and the <div> below. However, when
> viewed in Firefox there seems to be a 2 pixel gap between the
> bottom flash swf and the top of the div.
Hi, Jessica,
This happens because OBJECT tags are inline elements, not block
elements. Like images, they will be set up as if they lived on a
particular line of text. Since the default for inline elements is that
they line up on the baseline, a few pixels will appear below the
OBJECT to make room for any descenders (the tails on "g" and "y" for
example). The fact that there aren't any descenders, just the object,
is beside the point -- the line box is still built that way.
Perhaps the easiest solution is to make the OBJECT a block element,
something like
#flashintro object {
display: block;
}
should clean this up. For more information about this issue, see
Eric's article about images in table cells (which illustrates this
issue more clearly than my paragraph does).[1]
None of the specs make it exactly obvious that OBJECTs are inline
elements, but looking at the HTML DTD provides the following clues:[2]
<!ENTITY % special
"A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">
...
<!-- %inline; covers inline or "text-level" elements -->
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
This basically says that <OBJECT> is a "special" tag, and special tags
are inline elements.
HTH,
Michael
[1] http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps
[2] http://www.w3.org/TR/html4/sgml/dtd.html#special
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
