iFrame Text Problem?
Hi,
I have some local files (HTM pages) that I access through the FireFox browser. These pages have a collection of links. Some of these are within [iFrame] /iFrame markups. The ones that link to URL images work fine. The problem I have is any iFrame I have that link to a text (URL) looks like it is not working. The box 'appears' blank (the same background color as the page).
However, when I click and highlight inside the iFrame, the text indeed is there. How do I get the text to appear in these iFrame boxes? (I tried it with [Embed], same problem.)
- Pj
Chosen solution
Firefox uses a transparent background on iframes by default. Apparently a plain text document does not invert properly in that scenario. Not sure if this is a bug or whether there is no applicable standard and IE is just more helpful.
I suggest using a style rule to change the background color of iframes. If the page in the frame (HTML page) sets its own background color, that will take precedence.
Here's a "Fiddle" that gives an example: http://jsfiddle.net/KV9Ct/
Read this answer in context 👍 0All Replies (11)
If you right-click the document in the iframe > This Frame > Open in a New Tab, does the document appear normally there, or does it have the same problem?
I do the same thing, but I use a DOCX file to store the information. When I load it into my Microsoft Word Starter program, I can edit, copy, or even have the link opened from the editor.
"Open Frame in New Tab" works just fine, just like if I would go directly there normally. It's a text of the local forecast, black text on white background.
It worked just fine when I using IE8/9 for years.
I noticed this when just recently switched to FF for the first time with v27 and now this v29.0.1.
I call up this off-line page I made by clicking the 'Home' button which brings up a home-made 'Home Page' I made with all my favorite/frequent links.
Is this a FireFox bugaboo?
- Pj
Is the color scheme of your main page also black-on-white? In that case, I would expect it to display normally.
Could you post the iframe tag? Omit the opening and closing angle brackets to avoid the forum trying to embed a file.
Do these links point to files on the internet or to local files on your computer?
(iFrame
Src="http://weather.noaa.gov/pub/data/forecasts/zone/oh/ohz011.txt" Width="600" Height="800" Scrolling="No" Alt="CUYAHOGA County Zone Forecast - CLE NWS")
(/iFrame)
(Cor-el, the links are nearly 100% pointing to images/pages/text from the Internet. Weather maps - Radar, Satellite images, etc.)
Well, well. I changed the background color from BLACK to a dark Green and the (black) text shows up. I did not have to account for this with IE, as it properly showed the text forecast page with its white background.
Why FF is not doing this, I do not know.
I just tried another forecast link, but it is an HTML page, and it shows up fine. I really wish I can get that text-link page to work right without having my whole page's background color changed from black.
Anyway to get this to work?
-Pj
My "Home Links Page" does have a number of links to local files (pages) and work just fine.
One of these local pages contains my local collection of weather images and text. Some of these are 'housed' in an iFrame, including the problematical text forecast with the background color 'problem'.
-Pj
To Sum this up:
I did not have to account for this with IE, as it properly showed the text forecast page with its white background.
Why is FireFox not doing this?
Chosen Solution
Firefox uses a transparent background on iframes by default. Apparently a plain text document does not invert properly in that scenario. Not sure if this is a bug or whether there is no applicable standard and IE is just more helpful.
I suggest using a style rule to change the background color of iframes. If the page in the frame (HTML page) sets its own background color, that will take precedence.
Here's a "Fiddle" that gives an example: http://jsfiddle.net/KV9Ct/
Hi jscher2000! Thanks! That works. (I say it is either a bug or design oversight.) ;) -&=:
Nifty 'JSfiddle' site. I need to learn more of that CSS stuff.
Is there a way to Center or Left/Right justify in iFrames? I did find anything on my initial search just yet.
There's something of a security barrier between the main page and the framed page, especially when they are on different sites. So... while you could center the frame in the page --
I suggest putting the frame in the middle of the following to center it horizontally on the page:
<div style="text-align:center">your frame here</div>
-- the style rules on the page can't reach into the page inside that frame. Or at least I did not find a way to do it when I was experimenting.
If you want to apply style rules to sites, you can either use the Stylish extension or create/edit a userContent.css file. It's probably beyond the scope of this question to go into much detail on that, but that is what I would try.