Update: Example code updated. It used the shortened form of iframe before, as in <iframe />. That doesn’t sit well with IE. It now uses <iframe></iframe> 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’ve done much web work before, you’ve probably, at some time or another, had to use an iframe. It’s not pretty, but sometimes it’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’t exist in the spec for XHTML Strict! It exists in Transitional, but I don’t like to use it. That may be good enough for some developers, but certainly not for me. How about you?
In Internet Explorer 8 (and possibly IE7, but I have not tested it) and Firefox, you can use the object element to embed a web page just like an iframe; however, IE gives it a thick, lovely border that seems impossible to remove. Here’s the trick: employing IE’s conditional comments, use an iframe for IE and an object for everything else. Here’s an example:
<!--[if !IE]><!--><object data="http://www.blizzarddigital.com/blog/" type="text/html" width="320" height="240"></object>
<!--<![endif]-->
<!--[if IE]><iframe frameborder="0" src="http://www.blizzarddigital.com/blog/" width="320" height="240"></iframe>
<![endif]-->
Valid XHTML Strict! Make sure to keep your settings the same across both elements to keep it consistent.
Happy coding!
The Pesky iframe and XHTML Strict
Update: Example code updated. It used the shortened form of
iframebefore, as in<iframe />. That doesn’t sit well with IE. It now uses<iframe></iframe>which works. The same goes forobject. It similarly does not play well with Firefox 4 (perhaps even lower versions) in shortened form.If you’ve done much web work before, you’ve probably, at some time or another, had to use an
iframe. It’s not pretty, but sometimes it’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’t exist in the spec for XHTML Strict! It exists in Transitional, but I don’t like to use it. That may be good enough for some developers, but certainly not for me. How about you?In Internet Explorer 8 (and possibly IE7, but I have not tested it) and Firefox, you can use the
objectelement to embed a web page just like aniframe; however, IE gives it a thick, lovely border that seems impossible to remove. Here’s the trick: employing IE’s conditional comments, use aniframefor IE and anobjectfor everything else. Here’s an example:Valid XHTML Strict! Make sure to keep your settings the same across both elements to keep it consistent.
Happy coding!
Tags: Conditional Comments, Firefox, Iframe, Internet Explorer, Object, Web Development, XHTML
Posted in Web Standards | Comments Off on The Pesky iframe and XHTML Strict