Question

I have a feeling this is another impossible request, but… Is it possible to override the width of an iframe friend selector element using only an external stylesheet?

I have a page that uses the iframe friends selector, but I cannot edit the HTML in any way, or use JavaScript. The code looks essentially like this in Firebug:

<div id="container">
    <fb:serverfbml class="fb_iframe_widget" width="718px">
        <script type="text/fbml">
        <span>
            <iframe id="fdf5a6b542baf6" class="fb_ltr" scrolling="no" name="f19fe08b5aec2e4" style="border: medium none; overflow: hidden; width: 718px; height: 555px;" src="about:blank">
        </span>
    </fb:serverfbml>
</div>

The issue is that my container is only 500px wide, and hides any overflow:

#container { width:500px; overflow:hidden; }

Which results in the invite box being cut off.

I have managed to override the inline styles on both the fb control and the iframe like this:

.fb_iframe_widget[style], #container iframe[style]  {
    width:500px !important; /* yes, I know, but it really doesn't work otherwise */
}

But inside the iframe there is an element called #fb_multi_friend_selector that is being forced to a width of 718px by a CSS file ending in a PHP extension. I’m assuming that this is a dynamic CSS file that is somehow reading the style attribute of the iframe and forcing that width value, but I have no idea how to override it from my stylesheet. Is it possible to do this?

Answer 1

You cannot access the contents of an iframe that is not from your own domain due to the same origin policy. This is to prevent cross-site scripting attacks.