I recently ran into a problem while trying to add an iframe with a transparent background in IE. CSS didn’t seem to apply to the iframe when I was working with it (at least not very well). What we’ll be fixing:
- Allowing a background to be set with CSS or a transparent background
- Removing borders from around the iframe (they look like crap)
The Background
In Internet Explorer, if you try to add a background (or have a transparent background) with your page’s CSS it doesn’t work. Instead, it keeps a white, boring background from the iframe (assuming the iframe has no background set). This little code will fix this problem, allowing transparent or colored backgrounds to be set through CSS.
Inside of your <body> tag in the HTML of the iframe, set the background style to “inherit” (<body style=”background:inherit;”>) and you can have a background using CSS from your page. It’s that simple.
Note: If you are making a transparent background, you need to add allowtransparency=”true” to the <iframe> tag as one of its attributes.
Note: If you want to make this iframe of a page that you cannot edit, look into using PHP to modify the <body> tag.
The Border
This one is just as simple, and can be done straight from the HTML. Add to the <iframe>’s attributes the following: frameborder=”0″
Out of interest, why are you still using iFrames? What do you use them for?
It was used for a frame that loaded a graph created through JavaScript, which was updated when the user submitted a form to be the graph reloaded (it was a poll). It would have been possible to reload it through JavaScript but much harder.