How to Display a Text File in HTML - FireFox Does not Display Text Files

First Impressions - How to Display a Text File in HTML - FireFox Does not Display Text Files

by Larry Neal Gowdy - Updated October 06, 2013

Displaying Text File in HTML on FireFox

Displaying a text file in HTML. Doh!

(This article was originally published on blog. I have updated the article for use here at First Impressions.)

While building a new website I came across an oddity that I had never seen before, and I thought it might be entertaining for other webmasters to discover what the problem was. (Surely most programmers have already run across this, but it was new and funny to me.)

The website I was working on uses iframes to display an external website within the web page. Displaying websites within iframes is very simple and it works well for all modern browsers. The website that I was building displayed all the wanted external websites without a problem, except for one government website that only uses text (txt) files. In Microsoft® Internet Explorer® the text file was displayed correctly, but in FireFox®, Chrome®, Opera®, and Safari® all that was seen was a small outline of the frame with a blank screen inside.

After looking over my code a few times and not finding errors, I looked on search engines to see if anyone else was having similar problems. I came across a few websites where individuals were reporting that FireFox was not displaying text files properly, and so I thought that maybe FireFox had a new bug that had not yet been corrected; but my problem was not just with FireFox alone but with all open-source browsers plus Safari too. Hmmm!

Going back to my code, I devised several different methods of working around the problem. PHP seemed like the perfect solution, but if the browsers were not displaying the text file already, then calling the text file through additional strings of code would not magically make the same text file readable. The best method seemed to be to create a PDF of the text file and to then display the PDF in an iframe. It worked great except for the problem that the website’s owner would have to manually download the updated text file each day, convert the text file to PDF, and then upload the PDF to the hosting server. Knowing that the daily chore would not be enjoyed by the customer nor myself, I tried other ideas, with each idea being no more successful than the PDF solution.

After about two hours of reading technical notes and trying different code I happened to notice that inside the displayed iframe that there was a very slight variance of color. Moving my head closer to the monitor I could see that there was a barely visible pattern of black images within the black background….oh good grief! Hahaha! The problem was solved!

Text files in Microsoft’s Internet Explorer are automatically given a white background as would any good word processor, but in FireFox and other browsers the text background will remain the same as the body’s background. So, the problem with FireFox not displaying text files was that I was trying to display a text file with black letters on a black background. Within a few seconds I inserted a table around the iframe and made the table’s background white, which solved the problem for all browsers.

I thought that my little experience was rather humorous! Of all the frames I’ve coded over the years, never before did I have to change the background color, and so this very simple peculiarity between browsers had me stumped. I have been trouble-shooting electronic circuits for over thirty years, and almost always the problems turn out to be something terribly simple, and quite often the more simple the problem, the harder it is to find. :-)

Unless otherwise stated, all content and graphics are Copyright©2011-2013 by Larry Neal Gowdy.
No content nor graphic may be copied or reused without written permission.