HTML code only works in Firefox & Opera

hsteiger · 03-14-2013, 05:35 AM

Challenge to anyone interested (please forgive the long explanation):

The code below is supposed to display looping images from 4 radar sites. Note that each site is centered within its own iframe.

I assigned each image as a background to its respective iframe. Since each image is larger than the iframe that contains it, this allows me to center the image on each radar location within the smaller iframe.

Now the problem! This code only works like it should (i.e. displaying looping images in each iframe) in the Firefox and Opera browsers. It won't work at all in IE. In Google Chrome, it only works correctly in the upper left iframe, and has trouble even loading the images in the other iframes. And in the Safari browser, although it is able to display all the radar images, it seems that only the upper left iframe loops consistently.

Note that I have only worked with HTML 4.01, and I am hoping SOMEONE can figure out what I need to do to get this code to work correctly in IE, Google Chrome, and Safari browsers. I did run it through a CSE HTML Validator and it looked OK.

Thanks much. Henry
____________________________________________________________

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="refresh" content="120">
</head>

<body>

<table width="940" border="0" cellpadding="0" cellspacing="0">
<caption align="center">Ft. Campbell, KY upper left, Old Hickory, TN upper right, Memphis, TN lower left, and Hytop,
AL lower right)</caption>
<tr>
<td>
<iframe width="466" height="386" align="left"
style="background-image:url('http://radar.weather.gov/ridge/lite/N0R/HPX_loop.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:-56px -57px;">
</iframe>

<iframe width="466" height="386" align="right"
style="background-image:url('http://radar.weather.gov/ridge/lite/N0R/OHX_loop.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:410px -50px;">
</iframe>
</td>
</tr>

<tr>
<td>
<iframe width="466" height="386" align="left"
style="background-image:url('http://radar.weather.gov/ridge/lite/N0R/NQA_loop.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:-56px 335px;">
</iframe>

<iframe width="466" height="386" align="right"
style="background-image:url('http://radar.weather.gov/ridge/lite/N0R/HTX_loop.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:412px 335px;">
</iframe>
</td>
</tr>
</table>
</body>
</html>

felgall · 03-14-2013, 09:18 AM

You should be using div or img tags - not iframe to attach those images (div if they are irrelevant to the page and are just background decoration behind content and img if they are supposed to be part of the page content. Anyway as background it makes no difference whether the browser displays them or not.

Arbitrator · 03-15-2013, 10:02 AM

Quote:

Originally Posted by hsteiger

I assigned each image as a background to its respective iframe. Since each image is larger than the iframe that contains it, this allows me to center the image on each radar location within the smaller iframe.

This is not proper use of an iframe element, which is supposed to be used to display content external to the current document.

Quote:

Originally Posted by hsteiger

Now the problem! This code only works like it should (i.e. displaying looping images in each iframe) in the Firefox and Opera browsers. It won't work at all in IE. In Google Chrome, it only works correctly in the upper left iframe, and has trouble even loading the images in the other iframes. And in the Safari browser, although it is able to display all the radar images, it seems that only the upper left iframe loops consistently.

Your code works for me in Firefox 19, Opera 12.1, and WIE10 out of the box. I have to use a Maximize or Restore Down command to get the images to display properly in Chrome 26; otherwise, your code works in that browser as well. I'm on a Windows machine, so I can't check your code in Safari.

Quote:

Originally Posted by hsteiger

Note that I have only worked with HTML 4.01, and I am hoping SOMEONE can figure out what I need to do to get this code to work correctly in IE, Google Chrome, and Safari browsers. I did run it through a CSE HTML Validator and it looked OK.

I was able to get a properly coded HTML5 solution working with a bit of trouble. It works in all of the aforementioned browsers, but probably not so much in older browsers:

Code:

<!doctype html>
<html lang="en-US">
	<head>
		<title>Demo Document</title>
		<!-- <base href="http://radar.weather.gov/ridge/lite/N0R/"> is not supported for inline SVG images in Opera 12.1. -->
		<style>
			* { margin: 0; }
			/* 940px = (2px border-left-width + 466px width + 2px border-right-width) × 2 */
			figure { width: 940px; overflow: auto; margin: 1em auto; }
			figcaption { margin-bottom: 1em; font-weight: bolder; }
			/* Browser Fix Explanation: WIE10 displays overflow content for inline SVG images without overflow: hidden. */
			svg { display: block; float: left; border: 2px solid silver; overflow: hidden /* Fix for WIE10 */; }
			svg:nth-of-type(even) { border-left: 0 none currentColor; }
			svg:nth-of-type(n + 3) { border-top: 0 none currentColor; }
			abbr { border: 0 none currentColor; cursor: help; }
			abbr:hover { border-bottom: 1px dotted; background-color: yellow; color: black; }
		</style>
	</head>
	<body>
		<figure>
			<figcaption>Clockwise from Top‐Left: <abbr title="Fort Campbell, Kentucky">Ft. Campbell, KY</abbr>, <abbr title="Old Hickory, Tennessee">Old Hickory, TN</abbr>, <abbr title="Hytop, Alabama">Hytop, AL</abbr>, and <abbr title="Memphis, Tennessee">Memphis, TN</abbr></figcaption>
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" width="466px" height="386px">
				<image x="-70" y="-85" width="600px" height="550px" xlink:href="http://radar.weather.gov/ridge/lite/N0R/HPX_loop.gif"></image>
			</svg>
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" width="466px" height="386px">
				<image x="-70" y="-85" width="600px" height="550px" xlink:href="http://radar.weather.gov/ridge/lite/N0R/OHX_loop.gif"></image>
			</svg>
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" width="466px" height="386px">
				<image x="-70" y="-85" width="600px" height="550px" xlink:href="http://radar.weather.gov/ridge/lite/N0R/NQA_loop.gif"></image>
			</svg>
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" width="466px" height="386px">
				<image x="-70" y="-85" width="600px" height="550px" xlink:href="http://radar.weather.gov/ridge/lite/N0R/HTX_loop.gif"></image>
			</svg>
		</figure>
	</body>
</html>

SirPrize · 03-15-2013, 11:16 AM

Quote:

Originally Posted by Arbitrator

This is not proper use of an iframe element, which is supposed to be used to display content external to the current document.

Do people still use iframes?
Seriously, I'm curious to how they're actually meant to be used.

Arbitrator · 03-15-2013, 11:29 AM

Quote:

Originally Posted by SirPrize

Do people still use iframes?
Seriously, I'm curious to how they're actually meant to be used.

They're used to import third-party content that you don't control. For example, you might import a YouTube video or a Facebook chat stream as has been done at http://thinkprogress.org/economy/201...e-protections/.

andyskipper · 03-15-2013, 01:18 PM

I have never been used iframe before but if you used div in properly than it will be worked.

Frankie · 03-15-2013, 01:35 PM

Quote:

Originally Posted by andyskipper

I have never been used iframe before but if you used div in properly than it will be worked.

Judging from your English, Andy Skipper is not your real name, is it?

felgall · 03-15-2013, 08:24 PM

Quote:

Originally Posted by Arbitrator

I'm on a Windows machine, so I can't check your code in Safari.

Why not - Safari has been available for windows since version 3 came out.

The only reason for still using an <iframe> tag now is IE7 which doesn't allow the border to be turned off if you do it properly using an <object> tag instead. All other browsers now support using the standard <object> tag for embedding one HTML inside another so that you no longer need to use the antiquated non-standard iframe tag for that purpose.

Arbitrator · 03-15-2013, 08:48 PM

Quote:

Originally Posted by felgall

Why not - Safari has been available for windows since version 3 came out.

Safari on Windows is dead. Apple quietly discontinued support for it quite some time ago (May 9, 2012 per Wikipedia).

Quote:

Originally Posted by felgall

The only reason for still using an <iframe> tag now is IE7 which doesn't allow the border to be turned off if you do it properly using an <object> tag instead. All other browsers now support using the standard <object> tag for embedding one HTML inside another so that you no longer need to use the antiquated non-standard iframe tag for that purpose.

In the modern world (HTML5), an iframe element should be used to display (third-party) HTML documents because that's the element designed for that purpose.