Question

See the code below:

<div>Lorem ipsum dolor sit amet</div>  
    <object  
        type="application/x-shockwave-flash"  
        data="banner.swf"  
        width="965"  
        height="120"  
    ></object>  
<div>Consectetur adipiscing elit</div>

Viewing it in either Gecko, Webkit or Presto, an unintentional vertical space occurs after the object, before the second div (see http://jooadam.hu/object). Removing whitespace from between tags, or explicitly setting margin and padding does not help.

Any help would be appreciated.

Answer 1

In the meantime someone answered my question on another forum. Objects, like images are inline-block elements; setting display: block on object solves the problem.

Answer 2

<div>Lorem ipsum dolor sit amet</div>
<object width="965" height="120">
    <embed src="banner.swf" type="application/x-shockwave-flash" width="965" height="120"></embed>

Lorem ipsum dolor sit amet

Answer 3

This problem really got me curious, besides the fact that I would use a different approach like using SWF object, the whitespace seemed to come out of nowhere.

I fiddled around a bit with firebug and found a way to fix it by just adjusting the styles:

#container { line-height: 0;}
#header, #footer { line-height: 1em;}

However I suspect that if you add a around the object tag it should fix itself.

Answer 4

<object width="965" height="120" align ="middle">

Align the object to the middle. Object placeholder will then be overlapped by the image or Flash content.

友情链接