IEfixObjectTags

The problem

Microsoft Internet Explorer doesn’t set the size of object tags automatically, and when an image is embedded with an object tag which does have width and height attributes, there are margins inside the object frame around the image, and the object frame has scroll bars.

See this example and this simulation of how it looks in MSIE. (If you are using MSIE to view them, both documents look about the same.)

The solution

Reference the iefixobjecttags script in the head section of your document. It will fix the object tags automatically. In other browsers than the Microsoft Internet Explorer the script doesn’t do anything at all, so we don’t need other browsers to load the script. That’s why it’s best to put the script tag into a conditional comment.

<!--[if IE]>
<script language="Javascript" type="text/javascript" defer="defer" src="/js-lib/iefixobjecttags.js"></script>
<![endif]-->

Now you only need to make sure that every object tag has a type attribute. The script needs the media type to decide what needs to be done.

See it in action here.

We’ve still got one problem. Version 6 of Internet Explorer doesn’t allow object tags to be nested inside each other. If you want to embed a media object in two alternate formats, some users will see both objects simultaneously instead of just the first of them which the system supports. To achieve nested object tags we need a trick. Inner object tags are at first hidden from Internet Explorer with conditional comments, as in the example below:

<object type="image/svg+xml" data="example.svg" width="100%">
  <!--[if fallback 1]><!-->
  <object type="image/png" data="example.png">
  <!--<![endif]-->
    <!--[if fallback 2]><!-->
    <object type="text/html" data="example.html" width="100%" height="100%">
    <!--<![endif]-->
      object tags don't work. Textual fallback content follows.
      ...
    <!--[if fallback 2]><!-->
    </object>
    <!--<![endif]-->
  <!--[if fallback 1]><!-->
  </object>
  <!--<![endif]-->
</object>

When loading the primary object fails, the script activates the fallback content.