{"id":736,"date":"2010-10-30T15:30:44","date_gmt":"2010-10-30T19:30:44","guid":{"rendered":"http:\/\/www.blizzarddigital.com\/blog\/?p=736"},"modified":"2011-05-13T13:21:15","modified_gmt":"2011-05-13T17:21:15","slug":"the-pesky-iframe-and-xhtml-strict","status":"publish","type":"post","link":"https:\/\/www.blizzarddigital.com\/blog\/the-pesky-iframe-and-xhtml-strict\/","title":{"rendered":"The Pesky iframe and XHTML Strict"},"content":{"rendered":"<p><strong>Update: Example code updated. It used the shortened form of <code>iframe<\/code> before, as in <code>&lt;iframe \/&gt;<\/code>. That doesn&#8217;t sit well with IE. It now uses <code>&lt;iframe&gt;&lt;\/iframe&gt;<\/code> which works. The same goes for <code>object<\/code>. It similarly does not play well with Firefox 4 (perhaps even lower versions) in shortened form.<\/strong><\/p>\n<p>If you&#8217;ve done much web work before, you&#8217;ve probably, at some time or another, had to use an <code>iframe<\/code>. It&#8217;s not pretty, but sometimes it&#8217;s the only choice, such as embedding a widget from another site or displaying things such as real estate listings. One of my biggest problems with it is that it doesn&#8217;t exist in the spec for XHTML Strict! It exists in Transitional, but I don&#8217;t like to use it. That may be good enough for some developers, but certainly not for me. How about you?<\/p>\n<p>In Internet Explorer 8 (and possibly IE7, but I have not tested it) and Firefox, you can use the <code>object<\/code> element to embed a web page just like an <code>iframe<\/code>; however, IE gives it a thick, lovely border that seems impossible to remove. Here&#8217;s the trick: employing IE&#8217;s conditional comments, use an <code>iframe<\/code> for IE and an <code>object<\/code> for everything else. Here&#8217;s an example:<\/p>\n<pre><code>&lt;!--[if !IE]&gt;&lt;!--&gt;&lt;object data=\"http:\/\/www.blizzarddigital.com\/blog\/\" type=\"text\/html\" width=\"320\" height=\"240\"&gt;&lt;\/object&gt;\r\n\t&lt;!--&lt;![endif]--&gt;\r\n&lt;!--[if IE]&gt;&lt;iframe frameborder=\"0\" src=\"http:\/\/www.blizzarddigital.com\/blog\/\" width=\"320\" height=\"240\"&gt;&lt;\/iframe&gt;\r\n\t&lt;![endif]--&gt;<\/code><\/pre>\n<p>Valid XHTML Strict! Make sure to keep your settings the same across both elements to keep it consistent.<\/p>\n<p>Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Update: Example code updated. It used the shortened form of iframe before, as in &lt;iframe \/&gt;. That doesn&#8217;t sit well with IE. It now uses &lt;iframe&gt;&lt;\/iframe&gt; which works. The same goes for object. It similarly does not play well with Firefox 4 (perhaps even lower versions) in shortened form. If you&#8217;ve done much web work [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[173,168,171,167,172,25,19],"class_list":["post-736","post","type-post","status-publish","format-standard","hentry","category-web-standards","tag-conditional-comments","tag-firefox","tag-iframe","tag-internet-explorer","tag-object","tag-web-development","tag-xhtml"],"_links":{"self":[{"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/posts\/736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/comments?post=736"}],"version-history":[{"count":10,"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/posts\/736\/revisions"}],"predecessor-version":[{"id":888,"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/posts\/736\/revisions\/888"}],"wp:attachment":[{"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/media?parent=736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/categories?post=736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/tags?post=736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}