putting a border around an embed

Dear Lazyweb,

I want to put two embedded videos side by side. I want each of them to have a 1 pixel border around the embed box. (E.g.) In Safari and Opera (no idea about IE), you can do:

    <EMBED ... STYLE="border:1px solid">

But in Firefox, the border does not show up. One way to accomplish it in all three is this:

    <DIV STYLE="border: 1px solid; width:480">
    <EMBED ... WIDTH=480 ...></DIV>

which is dumb because you have to specify the width twice, and also because that doesn't let you put the embeds side by side unless you wrap a TABLE cell around each of them.

Any other ideas of how to make this work?

Is it a bug in Firefox that EMBED and OBJECT ignore the CSS "border" attribute?


UPDATE: Problem solved.

Tags: , , ,

23 Responses:

  1. nidea says:

    Will it work if you also specify the border color?
    e.g. "border:1px solid #ff0000"

  2. tangaroa says:

    I don't quite recommend setting embed to display:block because I tried it and it threw a 1px-height border/line across the entire screen, but maybe you can get it to work.

  3. If you have any layout problem in HTML, just use a fucking table. I believe I'm merely reminding you of some wisdom you dropped on us before.

  4. lx says:

    Seems like a Firefox/Mozilla bug to me as you suggest. This page:

    http://openvein.com/ext/theprids.html

    --shows the border correctly on Safari 4, Chrome, and IE 8. It fails to render in Firefox, Camino, and SongBird.

    Notably, in FireBug, I can see the CSS for it -- it gets parsed and added to the DOM for the element.

    More notably, spamming refresh shows the border appear for a split second. It looks like maybe it's actually drawing the border under the SWF.

  5. acroyear70 says:

    try the divs with "display: inline" to avoid having it automatically block them (which is where the newline comes from)?

  6. harryh says:

    Still gross, but better than the TABLE?

    <DIV STYLE="border: 1px solid; width:480;float: left>
    ...
    </DIV>
    <DIV STYLE="border: 1px solid; width:480;float: left>
    ...
    </DIV>
    <DIV STYLE="clear: both/>

    • jwz says:

      No, that's more gross.

      • evan says:

        I believe this suggestion is the "correct" way to do what you were trying to do. It means if the window is too small it can wrap the two things into two lines. If you don't want them to do that, then I think a table is the right way to go.

        Signed,
        a person who makes browsers but isn't an expert on these bits

  7. thirdwired says:

    The key, as I suspected after looking at some of the later comments, was (in spite of the giving-up notice) to assign

    display: block;

    or

    float: left|right;

    to the object/embed node.

    Centering multiple, side-by-side plugin instances requires:

    float set to left on all instances;
    a containing div;
    an appropriate discrete width value on the container (which shouldn't be necessary but is); and
    left and right margins on the container set to auto.

    The reasons those values work as intended in Firefox 3.5.5/Mac is... so esoteric that they would make my brain hurt if I didn't know this crap up and down.

    Apologies for answering after time was called, but... it rankled.

    There is also SWFObject, the code for which can presumably be adapted to platforms other Flash.

  8. remonstrare says:

    You can't put DIVs left and right of each other unless they're fixed size and you're lucky. Either wait for columnar layout in CSS3, or use a table today.

  9. triggur says:

    The ongoing CSS vs Tables battle makes me sad.

    When you get right down to the details, I don't grok most of the pro-CSS arguments. Certainly not the "it's easier and works everywhere" parts, 'cuz man, it isn't and it doesn't.