Styles for css classes in an iframe

Question

Inspired by the new User Flair, but the question applies to the general case as well.

Let's say I want to include something like this on a site that doesn't allow me to specify external styles or use any javascript. The only thing I can do is paste in an object, embed, or iframe, and some other simple html. Additionally, the width of the space is only 160 pixels, rather than the 200 needed by default for the flair badge.

To fix this, I want to set styles for the valuable-flair class in the iframe, namely change width to be 160px instead of 200. Then things will be fine, as long as the username doesn't overlap (and even then, once I figure this out I can use the same technique to play with that as well).

Any ideas?

Answer 1

There is no way you can alter the design of the Iframe using CSS if you can't control the page in the SRC attribute.

I recommend you read the src of the iframe on the server side instead (using PHP, Python or what you fancy), e.g. fopen() the src and fread() into a variable, than do some str_replace on this variable (to extract contents, remove < body >,< / body >...) play with the design and place the result in your page.

This way you can control the design.

Answer 2

If the CSS for the width and height were expressed as percentages rather than absolute values, you could adjust the width by adjusting the IFrame. However, if hosting a custom implementation is not possible for you, you are out of luck without JavaScript.