A bordered box shows up in a stand alone html page but does not show when placed in an iframe.

Question

I have this CSS code and it works as expected in a plain old stand alone page, but only the text shows in an iframe. Displays the same in Firefox 3 and IE8. Any thoughts?

#MyBox {
position: absolute;
display:block;
left: 0px;
top: 90px;
width:150px;
height:150px;
color: blue;
border-style: solid;
border-color: red;
border-width:3px; 
background-image:url(images/blu_grad.gif);    /* big pic may take too long to load */
}

Here is my box!

Answer 1

Are you crossing servers? It's possible, depending on your setup, that the image can't be found via relative pathing.

Answer 2

An iFrame is basically a whole new page. Have you checked to be sure that the CSS is loaded within the of the iFrame specifically rather than just within the page holding the iFrame?