Help with embeding Flash in HTML

[stoney_kun]

Man this is driving me insane... I have two divs one floating left,
the other floating right. Rather than displaying side-by-side, they
are stacking.. This error only occurs when the Flash content is
present!!

Please help

http://www.stoneykun.com/uma/island/

Thanks.

[Aran Rhee]

Remember that when SWFObject is writing flash content to the page, it is
REPLACING the div you specify. It sounds like you need a wrapper div which
you style / position etc and when the child div gets replaced, you can still
control the post /style of the warpper.

Aran

[Philip Hutchison]

<div id="myflash"></div>

becomes

<object id="myflash">

the object sometimes needs to have the css "display:block" added

- philip

[stoney_kun]

Okay the two divs are now aligned. Although, in IE6 the gap between
the aligned divs and the line below is not meant to be so large! It
should only be 5px. I have set object to "display:block". Can anyone
see the difference in the gap sizes?

Please help... I am going mad!

Thanks.

> > Thanks.- Hide quoted text -
>
> - Show quoted text -

[Aran Rhee]

Sorry, I don't have IE6 to test... (we also try to keep this list pretty
specific to SWFObject related issues - this is a straight CSS issue)

As you are using a separate style sheet for IE6, setting some specific
values in screen_ie.css is the way to go (as no doubt you've been trying
already). I always try to reduce my issue to as small a chunk as possible,
so setting up a basic test page with just the 3 divs you are working with is
the best way to go. Once you get it working in a simple test case, you can
build back up to your full page...

BTW - unless you have some reason to show HTML content through your flash
file, you should set your wmode=opaque (this renders the swf with z-index
layering capability, but uses less CPU and avoids lots of browser bugs)

[stoney_kun]

I believe this is a SWFObject bug... When I disable the write to div
live in the JS the divs display correctly! For anyone who has IE6, I
have two versions online for your perusal.

SWF disabled (divs display correctly) - http://www.stoneykun.com/uma/island/disabled.html
SWF enabled (extra gap between divs and line) - http://www.stoneykun.com/uma/island/index.html

If you are on XP, this is a lightweight version of IE6 you can install
- http://tredosoft.com/Multiple_IE

Thanks.

[Philip Hutchison]

hi stoney

i haven't seen your code, but i doubt it's a swfobject bug so much as a CSS issue. divs and objects are not treated equally; divs are block-level elements while objects are a special type of inline element. http://www.autisticcuckoo.net/archive.php?id=2005/01/11/block-vs-inline-1

this means a developer can't always simply take CSS styles from a div, apply them to an object and have it work exactly the same.

an extra gap between floated elements is a common bugaboo in IE.  any floats performed in IE need to take into account IE's funky box model and the status of the hasLayout property. here is a good overview of the many issues involved:
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

as for swfobject being the cause of the issue, all swfobject does is place an object on the page; it's up to the end user to apply whatever CSS is needed. 

it will take some experimenting, but I'm sure you can sort it out through CSS.

good luck!  :)

- philip

[stoney_kun]

Philip... You were right!

I was blaming SWFObject and focusing all my debuging attention on that
as opposed to the CSS. Below is a summary of my finding and fix for
anyone who encounters the same problem in the future :)

It appears the clearfix workaround (http://
www.positioniseverything.net/easyclearing.html) I applied to the
wrapper div was causing an erroneous gap to appear after the 2 floated
divs. I removed this class from the wrapper div and manually added a
div after the floated divs and set the style to "clear:both". This has
fixed my problem!

Thanks to everyone for guiding me to victory :)

On May 8, 1:04 pm, Philip Hutchison <platelu...@gmail.com> wrote:
> hi stoney
>
> i haven't seen your code, but i doubt it's a swfobject bug so much as a CSS
> issue. divs and objects are not treated equally; divs are block-level

> elements while objects are a special type of inline element.http://www.autisticcuckoo.net/archive.php?id=2005/01/11/block-vs-inli...

>
> this means a developer can't always simply take CSS styles from a div, apply
> them to an object and have it work exactly the same.
>
> an extra gap between floated elements is a common bugaboo in IE.  any floats
> performed in IE need to take into account IE's funky box model and the

> status of the *hasLayout* property. here is a good overview of the many
> issues involved:http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-yo...

>
> as for swfobject being the cause of the issue, all swfobject does is place
> an object on the page; it's up to the end user to apply whatever CSS is
> needed.
>
> it will take some experimenting, but I'm sure you can sort it out through
> CSS.
>
> good luck!  :)
>
> - philip
>

> On Thu, May 7, 2009 at 7:47 PM, stoney_kun <stone.a...@gmail.com> wrote:
>
> > I believe this is a SWFObject bug... When I disable the write to div
> > live in the JS the divs display correctly! For anyone who has IE6, I
> > have two versions online for your perusal.
>
> > SWF disabled (divs display correctly) -
> >http://www.stoneykun.com/uma/island/disabled.html
> > SWF enabled (extra gap between divs and line) -
> >http://www.stoneykun.com/uma/island/index.html
>
> > If you are on XP, this is a lightweight version of IE6 you can install

> > -http://tredosoft.com/Multiple_IE

[Philip Hutchison]

great, glad you got it working!

side note: the latest fad for clearing floats is to use overflow:auto on the parent element instead of inserting an extra div after the floated elements.  http://www.quirksmode.org/css/clearing.html

this

<div id="container">
<floated element /><second floated element />
<div style="clear:both"></div>
</div>

becomes this

<div id="container">
<floated element /><second floated element />
</div>

#container { overflow: auto; }

a div with clear:both is slightly more reliable, though.  food for thought. :)

- philip