asked on IFRAME background-image OK in FF, Opera, but not IE7
Friends,
Can someone please save what's left of my hair and tell me why the snippet below works in FF 3.0.1, Opera 9.51 but not in IE 7.0.5730.13?
Thanks
Can someone please save what's left of my hair and tell me why the snippet below works in FF 3.0.1, Opera 9.51 but not in IE 7.0.5730.13?
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
iframe#viewport
{
background-color: Transparent;
background-image: url(http://localhost/ov-en/image/Peeka-Boo.png);
background-repeat: no-repeat;
height: 300px;
width: 400px;
}
</style>
<script type="text/javascript">
window.onload = function() { document.title = '<iframe> Background Image Test'; }
</script>
</head>
<body>
<div id="heading">
<h1>mousey-mick.com</h1>
<h2>"The most malevolent rodent on earth!"</h2>
</div>
<div id="content">
<iframe id="viewport" frameborder="1"></iframe>
</div>
</body>
</html>
HTMLCSS
Last Comment
Serge Fournier
What a great tip! Nice one MSK!
ASKER
Trust me, it doesn't matter.
I'm working on putting it online, but can't just yet.
But here is something interesting:
On the initial page load, there is no background image, and the SRC of the >iframe< is not set. When I set the SRC of the >iframe<, suddenly there is the background image.
I will see if creating a "dummy" page for the initial load solves the problem.
I'm working on putting it online, but can't just yet.
But here is something interesting:
On the initial page load, there is no background image, and the SRC of the >iframe< is not set. When I set the SRC of the >iframe<, suddenly there is the background image.
I will see if creating a "dummy" page for the initial load solves the problem.
ASKER
"name" is considered outdated...
Attributes should be quoted strings (frameborder="0")
followed by:
This does not address anything re: background-image, sorry. Nor does it fix my problem.
ASKER
I have tried "ALLOWTRANSPARENCY", "allowTransparency", "allow-transparency", all to no avail.
I made the image the background for a page and pointed the >iframe< SRC at it, but no image. It flashes briefly, then is replaced with a white background.
I made the image the background for a page and pointed the >iframe< SRC at it, but no image. It flashes briefly, then is replaced with a white background.
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
You are going about this TOTALLY the wrong way. NONE of your code is needed, and there is no need to force an image as background from the PARENT, because that is not how it is done.
An IFRAME is a separate page within a page. The background BELONGS to the page going into that iframe.
So ALL you do is put in the page that is going into the iframe --
BODY background="some_image.gif
and you are done. The parent CANNOT force what the page has as background going into an iframe. The page in the IFRAME is its own entity, like www.google.com -- you cannot control it.
This is the CORRECT answer to your question.
An IFRAME is a separate page within a page. The background BELONGS to the page going into that iframe.
So ALL you do is put in the page that is going into the iframe --
BODY background="some_image.gif
and you are done. The parent CANNOT force what the page has as background going into an iframe. The page in the IFRAME is its own entity, like www.google.com -- you cannot control it.
This is the CORRECT answer to your question.
see my comment
PengiunMod -- don't get so bent out of shape. CAPITALS ARE FOR EMPHASIS OF KEY POINTS.
This idea that capitals are shouting, I think is extremely childish. I never shout to anyone. But in long posts I DO need to emphasize the KEY POINTS. Try and get off the "shouting" mantra that has evolved from who knows where, maybe frail egos, and realize, it is for emphasis only of key points.
I never said my answer was perfect, only cynicism said that. Just trying to make the questioner see the right way to do this when iframes are involved. So why am I having to explain all this self-evident stuff? Because you are upset with CAPITALS? My My, how else can a person emphasize KEY POINTS? This EE input box is so limiting, it deletes HTML codes willy nilly, but has never allowed any way for emphasis
Try to "tough up" your persona on EE. We get some pretty heavy flack here in the front lines, maybe join us to see you can't keep a sensitive ego here. I am told I have to "take it", so why can't mods take it too?
This idea that capitals are shouting, I think is extremely childish. I never shout to anyone. But in long posts I DO need to emphasize the KEY POINTS. Try and get off the "shouting" mantra that has evolved from who knows where, maybe frail egos, and realize, it is for emphasis only of key points.
I never said my answer was perfect, only cynicism said that. Just trying to make the questioner see the right way to do this when iframes are involved. So why am I having to explain all this self-evident stuff? Because you are upset with CAPITALS? My My, how else can a person emphasize KEY POINTS? This EE input box is so limiting, it deletes HTML codes willy nilly, but has never allowed any way for emphasis
Try to "tough up" your persona on EE. We get some pretty heavy flack here in the front lines, maybe join us to see you can't keep a sensitive ego here. I am told I have to "take it", so why can't mods take it too?
Just in case you missed the answer ...
The main page tells the iframe (via attributes) that the transparency is allowed.
You load the iframe with a transparent background.
No image.
If you are expecting to load a semi-transparent image (like a alpha PNG), then this is going to partially supported.
If you intent is to load a third party site and then change the background to transparent ... you may come across a limitation of some browsers to not let you interact with a page from a different site ("same origin policy" I think this is called).
Also, once the load order becomes important.
Main page is loaded, CSS is triggered during the loading, the iframe has a transparent background for a while. That is until the iframe contents kick in.
If the iframe's content doesn't have a transparent background, then you will not get the result you want. The iframe's content is responsible for the background, not the main page.
The main page tells the iframe (via attributes) that the transparency is allowed.
You load the iframe with a transparent background.
No image.
If you are expecting to load a semi-transparent image (like a alpha PNG), then this is going to partially supported.
If you intent is to load a third party site and then change the background to transparent ... you may come across a limitation of some browsers to not let you interact with a page from a different site ("same origin policy" I think this is called).
Also, once the load order becomes important.
Main page is loaded, CSS is triggered during the loading, the iframe has a transparent background for a while. That is until the iframe contents kick in.
If the iframe's content doesn't have a transparent background, then you will not get the result you want. The iframe's content is responsible for the background, not the main page.
ASKER
scrathcyboy: Did you even read my question? While I admire your passion, I have to wonder about your disdain.
I will rephrase my question for you:
Can you please tell me why the snippet in http:#a23579438:
1. WORKS in FF 3.0.1
2. WORKS in Opera 9.51
3. DOES NOT WORK in IE 7.0.5730.13
__________________________
RQuadling:
>>If you are expecting to load a semi-transparent image (like a alpha PNG), then this is going to partially supported.
What does "partially supported" mean? Every browser EXCEPT IE7?
>>If the iframe's content doesn't have a transparent background, then you will not get the result you want.
But I *DO* get the result I want in both Firefox and Opera.
__________________________
As stated earlier, I have it working in all browsers, albeit IE7 has special code - and it's own >iframe< page. However, my original answer remains unanswered, despite the Best Efforts of all involved.
I will rephrase my question for you:
Can you please tell me why the snippet in http:#a23579438:
1. WORKS in FF 3.0.1
2. WORKS in Opera 9.51
3. DOES NOT WORK in IE 7.0.5730.13
__________________________
RQuadling:
>>If you are expecting to load a semi-transparent image (like a alpha PNG), then this is going to partially supported.
What does "partially supported" mean? Every browser EXCEPT IE7?
>>If the iframe's content doesn't have a transparent background, then you will not get the result you want.
But I *DO* get the result I want in both Firefox and Opera.
__________________________
As stated earlier, I have it working in all browsers, albeit IE7 has special code - and it's own >iframe< page. However, my original answer remains unanswered, despite the Best Efforts of all involved.
ASKER
>>my original answer remains unanswered, despite the Best Efforts of all involved.
I meant, of course:
my original question remains unanswered, despite the Best Efforts of all involved.
I meant, of course:
my original question remains unanswered, despite the Best Efforts of all involved.
SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Right. The IFRAME is not part of the main page. I get that.
I have used them before. I use window.parent to let the IFRAME talk back to the parent.
It just seems odd that there should be such a big difference in this particular behavior between IE and everyone else. Knowing that there is, I have to treat IE differently.
(sigh) Why can't we all just, get along? (Slim Whitman music in the background...)
I have used them before. I use window.parent to let the IFRAME talk back to the parent.
It just seems odd that there should be such a big difference in this particular behavior between IE and everyone else. Knowing that there is, I have to treat IE differently.
(sigh) Why can't we all just, get along? (Slim Whitman music in the background...)
> scrathcyboy:
> This idea that capitals are shouting, I think is extremely childish. I never shout to anyone. But in long
> posts I DO need to emphasize the KEY POINTS. Try and get off the "shouting" mantra that has
> evolved from who knows where, maybe frail egos, and realize, it is for emphasis only of key points.
AT LEAST! 1 person in the world think like me about this idiotic shooting/caps thing!
THANK YOU !
> This idea that capitals are shouting, I think is extremely childish. I never shout to anyone. But in long
> posts I DO need to emphasize the KEY POINTS. Try and get off the "shouting" mantra that has
> evolved from who knows where, maybe frail egos, and realize, it is for emphasis only of key points.
AT LEAST! 1 person in the world think like me about this idiotic shooting/caps thing!
THANK YOU !
ASKER
>>AT LEAST! 1 person in the world think like me about this idiotic shooting/caps thing! (sic)
Shooting caps? I had a "Fanner 50" when I was a kid, and "Greenie Stick 'em Caps" that were little round caps, about 1/4" circles - on a sheet about 6" suare. They had adhesive on the back so you could stick one on a bullet, and when you fired your gun - Bang!
The bullets were little plastic thingies with a clip mechanism that held them in place on the shell. I think there was a spring in the shell to provide propulsion.
Shooting caps? I had a "Fanner 50" when I was a kid, and "Greenie Stick 'em Caps" that were little round caps, about 1/4" circles - on a sheet about 6" suare. They had adhesive on the back so you could stick one on a bullet, and when you fired your gun - Bang!
The bullets were little plastic thingies with a clip mechanism that held them in place on the shell. I think there was a spring in the shell to provide propulsion.
i had success putting a background in an frame with the full path of the image (C:\fdgfds\dsgfd\dg.tif)
And then you could just put it into <title>iframe Background Image Test</title>
Can you provide an online version? (On a laptop with no web server and too darn lazy to install one!).