Aligning text next to embedded flash object in FireFox

DrJ · #1 Jul 30, 2009, 05:39 PM

I am trying to embed this flash video into a website and i want the text to read along the side of it. However, of course, there needs to be some padding on the right side and the bottom of the video.

I tried using

Code:

style:padding-right:15px

in the OBJECT tag and it seemed to work in Dreamweaver. However, when viewed in FireFox, it does not work. I also tried margin and got the same result.

The first image is what I want (the way it is displayed in Dreamweaver)

The second image is what I got (the way it is displayed in FireFox)

It seems like such a stupid problem but I can't figure it out. Any ideas?

crigby · Jul 30, 2009, 06:17 PM

Hi,
Dreamweaver is not particularly cross-browser adept. A proper stylesheet will do it with no "sweat."
Peace,
Clarke

DrJ · Jul 31, 2009, 09:44 AM

Well, I am using CSS for the whole site. I don't allow Dreamweaver to create its own (ugly) CSS styles like it tries to. I don't think it's Dreamweaver that is the issue. I understand that Dreamweaver renders the code it's own way... just as IE & FF render the code THEIR own way.

I think it is in the way that FF is rendering the CSS for the embedded flash object.

I use the same style on images when I want the same effect (usually accomplished with the "padding" CSS style). However, for SOME reason, since it is an embedded flash video, it seems to be handling the "padding" differently.. or rather, not at all.

For example:

Code:

<img src=img.jpg align="left" style="padding-right=15px" />

will give the desired result of having the text run down the right side of the image with a nice 15px buffer between the image and the text.

You would think adding the padding to an OBJECT tag would produce the same, nice 15px buffer between the object and the text.

crigby · Jul 31, 2009, 07:26 PM

Hi,
Just a thought, but how about a "div" tag the uses an ID to increase its specificity, add a margin to it (specific or shorthand) and embed your object within it.
Peace,
Clarke

DrJ · Jul 31, 2009, 07:38 PM

Ya know... I tried that. I should probably try it again because what happened didn't seem like it should have happened...

I'm not at work but the code goes something like this:

Code:

<div class="container">
  <object align="left" blah blah blah>
     <embed src="flash.flv" blah blah blah
     </embed>
  </object>
text text text text text text text text text 
</div>

So I tried the padding style and the margin style in both the embed and the object tags with no luck in FF.

So then I tried adding a DIV around the flash like this:

Code:

<div class="container">
  <div style="margin-right=15px">
    <object align="left" blah blah blah>
      <embed src="flash.flv" blah blah blah
      </embed>
    </object>
  </div>
text text text text text text text text text 
</div>

I ended up with a DIV that was 1px by 1px with a 15px margin on the right. It didn't surround the flash, like I thought it would.

So I added height and width to it like this:

Code:

<div class="container">
  <div style="margin-right=15px; height=240px; width=300px">
    <object align="left" blah blah blah>
      <embed src="flash.flv" blah blah blah
      </embed>
    </object>
  </div>
text text text text text text text text text 
</div>

Now the div was the same size as the flash with an additional 15px margin on the right.

When I previewed it in FF, it's like the DIV was on a layer by itself... in front of or behind both the flash and the text. It was just there but it didn't affect the placement of anything around it. The text just overlapped the DIV and butted right up against the flash like it always had been doing.

??

Didn't seem right to me.. I think that's when I came here to ask lol

crigby · Jul 31, 2009, 08:54 PM

Hi,
Well, I did say an ID, which has a higher specificity and I would put the declaration in the Head. I try to avoid inline style, and even prefer not to embed it in the document; separate the HTML from the CSS most of the time. There are exceptions and I would consider Flash as rendering one.
Peace,
Clarke