stupid CSS tricks

Dear Lazyweb,

When you go to the DNA Lounge Webcasts page and click on the "Video Webcast" link, it pops up a chromeless window with the Justin.TV Flash embed in it.

I'd like to make it so that when you resize that window, the embed resizes with it.

This is what I tried. It works great in Safari, but in Firefox, the embed is always 100% wide and 1 pixel tall; and in Opera, it's always 100% wide but about 200 pixels tall.

Ideas?

Tags: , , , ,

23 Responses:

  1. duskwuff says:

    For stupid reasons, OBJECT won't accept WIDTH="100%", but EMBED will. Go figure. Your best bet is to just grab a copy of SWFObject and have it handle the embedding logic for you.

  2. scullin says:

    In order for a percentage height to work in Firefox, all enclosing elements must have a height (like "height: 100%"), including, for no apparently good reason, the <html> element.

    • mcsmurf says:

      Just FYI, I think the reason for the rendering is the following: The height of the object element is "auto", which is 0px by default as this is what IE and Opera do (did?!) when no height is specified. As far as I know the height: property in the STYLE element overrides the HEIGHT attribute as both specify a CSS property. So it tries to render 88,7% of the height of the object element, which is 0px. So you need to expand the height of the tag as this is the root of the document which also has a size.

    • driusan says:

      Indeed. Playing around with firebug, the following seems to do what he wants:

      Give the html element a height of 88.7%;*
      Give the body element a height of 100%;
      Give the div#center element a height of 100%;

      * 100% makes the footer scroll off the bottom of the page. I have no explanation that doesn't make my head hurt.

      • jwz says:

        This doesn't work for me in Firefox 3.5 or Opera 10.01.

        • scullin says:

          Yeah, I won't pretend to know how to make Opera to work, because, well, I just don't care.

          But the missing element for Firefox seems to be missing is that *both* divs, even the seemingly redundant center something that is 100% wide div, need to have height: 100%.

  3. loic says:

    This is usually when I break down and use JS.

    • fleshmeatstg says:

      Unfortunately this is probably your best bet. CSS lacks the capability to say "x% - height(something)" or any type of expression other than a simple number. So default the object to something reasonable, then twiddle it onload to take up the full window. The future will happen eventually.

    • fleshmeatstg says:

      To follow up to myself: Dbaron's idea would work too. I've just been a CSS weenie too long to think of it myself. Prepare for some hate mail from more of said weenies because ZOMG THAT ISN'T TABULAR DATA WTF.

      • loic says:

        Oh my god people who complain that using tables isn't "standards compliant" or "semantic" and then do awful hacks with DIV to make things line up in a table make me want to stab them with acid filled syringes.

        • lionsphil says:

          There is a website for this occasion.

          I'll stop abusing table for non-tabular data when CSS is actually capable of spring-based layouts like GTK+/Swing/probably-things-long-before-these-examples have been for over a fucking decade. (Of course, tables can't do that either, but they're marginally more capable.)

  4. dbaron says:

    As other commenters have said, CSS says that percentage heights aren't supposed to work unless the parent has a fixed height.

    What I'd recommend is using a table and getting rid of the magic 88.7%:

    1. add the rule html, body { height: 100%; }
    2. make a two row table, and give the table and the first row height="100%"
    3. stick the embed in the first row with width:100%; height: 100%

    • mhoye says:

      If actual answer to his question turns out to be "use tables", I will need an hour to stop laughing.

    • leolo says:

      My original answer was going to be "You can't do that in CSS. Use Javascript"

      Now I'd like to revise my answer to "You can't do that in CSS. Use a table."

      I have a hunch that the folks on the CSS standard commitee never used HTML at a real job.

    • jwz says:

      I can't get this method to work either. When I use a table with height=100% I get the same bad behavior in Firefox as I had been getting in Opera.

      • dbaron says:

        I posted a modified copy of your page, working in Firefox, at http://dbaron.org/tmp/resizable.html

        • jwz says:

          Works in Safari and Firefox but not Opera (which is usually a strong indicator that it won't work in IE.)

        • lionsphil says:

          That page appears to be fighting with itself:

          <OBJECT TYPE="application/x-shockwave-flash" WIDTH=480 HEIGHT=360
          STYLE="width:100%; height:100%; display:block"

          By eye, the height you get appears to be 100% of 360px.

          • mcsmurf says:

            Don't CSS style rules simply overwrite HTML attributes?

            • lionsphil says:

              Maybe. Opera 10.01 is doing something weird in quirks mode (as befits the name). The valid page works as expected, but the quirky one gets vertically squashed images, albeit the same height regardless of an HTML height attribute, admittedly.

              Maybe fixing up the validity of the above page will help. A cursory glance over the validator looks like it's mostly simple pedantry (capitalisation, ampersand-escaping, etc.), rather than anything painfully involved.

              • lionsphil says:

                Sure enough, Opera's quirks mode is matching how IE6 handles either variant (although without hilariously bad object support that gives me a nice little iframe with an icon in it). I guess it's doing something useful, like 50% viewport height, rather than the CSS standard's crazy "height is meaningless until tied down because the web is made of an infinitely long ream of fanfold paper!"

  5. krick says:

    I assume the webcast is a flash object. If so, you might want to use this...

    http://code.google.com/p/swfobject/

  6. rabidsnail says:

    Here's how you do it with the Justin.tv javascript API: http://pastebin.com/f2b01e0bd