0

I have multiple iFrames:

<html>
<head>
<title>Page</title>
</head>
<body>
<iframe src="http://website1.com" /><p></p>
<iframe src="http://website2.com" /><p></p>
<iframe src="http://website3.com" /></p>
<iframe src="http://website4.com" /><p></p>
</body>
</html>

However, website1.com loads as an iframe. If I put website2 above it, only website2 loads. How do I make all 4 iframes load? It's not hidden, I used inspect element to verify that ONLY website1 is displayed.

Jon
  • 2,566
  • 6
  • 32
  • 52

1 Answers1

1

Your problem is that iFrames are not self-closing tags. Make your iFrame tags using this syntax instead:

<iframe src="http://google.com"></iframe><p></p>
<iframe src="http://yahoo.com"></iframe><p></p>
<iframe src="http://ask.com"></iframe><p></p>
<iframe src="http://bing.com"></iframe><p></p>

JSFiddle: http://jsfiddle.net/7q6BC/

Mike Koch
  • 1,540
  • 2
  • 17
  • 23
  • I'm not entirely sure why. Technically HTML does not allow for self-closing tags, however some tags will be self-closed by *XHTML*. I am not sure if XHTML supports iFrame (if it doesn't that would explain the issue). If this worked, please mark it as accepted in case other visitors have the same issue :) – Mike Koch Feb 10 '14 at 01:24
  • @chipperyman573 and here is some more information on self-closing tags and their validity: http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5 – Mike Koch Feb 10 '14 at 01:25