Data URI won’t work in IE
Tags:
Inline Data Definitions for Objects
If the data content of the object is reasonably small, it can be defined by including the data itself in the <object> tag, this is called an inline definition:
<object data=”data:application/x-oleobject;3300,FF00,E3A0, …etc… “></object>
This isn´t very common as the amount of data needed for inline definition is usually quite impractical.
Inserting Images with an <object> Element
One interesting proposal in HTML 4.01, as we´ve seen, is the use of the <object> element to embed ordinary graphics files, such as GIF and JPEG files. In its most basic form the use is simple:
<object data=”wroxLogo.gif”></object>
The data attribute works just like the src attribute in an <img> tag, but can also accept inline data where the image is small. This can speed up the time to view of a page, by reducing the number ofserver connections required:
<object type=”image/jpeg” data=”data:image/jpeg;3300,FF00,2756,E5A0,E3A0,22F6, …etc… “></object>
However, unlike the <img> element, which will display a graphic in the browser with this minimal information, this isn´t enough forInternet Explorer (versions 4 to 6). It will assume that the height and width settings are set to zero, and we won´t see anything, although Netscape 6 and Opera 5.02 will display the graphic quite happily:
By adding the usual width and height attributes common to the <img> element, and adding the MIME type in the type attribute, the image will be displayed in Internet Explorer with the following code:
<object type=”image/gif” data=”wroxLogo.gif” width=”100″ height=”100″ > This is our Wrox Logo</object>
While adding the height and width now means that we can see the image in Internet Explorer, all is still not well:
Looking at the result, we can see an example of a container with the <object> element. Unlike the <img> element, in Internet Explorer (versions 4 to 6) the <object> element doesn´t use the default size of the file to size the container. The height and width we´ve specified are used to size a frame, which contains the <object> element itself, but not the image. Because it´s larger than the available space, the browser automatically adds scroll bars.
Of course, the “proper” way to size an element in HTML 4.01 is to use style sheets to specify the height and width styles. Below, we´ve used the width attribute in an inline style sheet for brevity. This code produces the same page as above:
<object type=”image/gif” data=”wroxLogo.gif” style=”width:100px; height:100px”> This is our Wrox Logo</object>
However, this doesn´t solve the problem of the scroll bars. Resizing the image container so that it fits the image also doesn´t solve the problem:
<object type=”image/gif” data=”wroxLogo.gif” style=”width:105px; height:105px”> This is our Wrox Logo</object>
Now the horizontal scrollbar is removed, but the vertical one remains, although it is now inactive:
In Internet Explorer therefore, we can´t use images inside the <object> element without incurring an unsightly scrollbar. This makes it unusable untilMicrosoft updates this.
Original Title: Sample Chapter: HTML 4.01 Programmers Reference
This is another attempt on my part to find ways to do inline images in HTML — meaning to include image data in an HTML without referring to an external image file. With HTML 4.01 compliant browsers such as Netscape, the proper way to do this is to use the Data URI, which takes Base64 data, as seen here.
IE is not 4.01 compliant. So we are out of luck. The following trick with <object> in IE only works with image file names, not data URI.
Inline Data Definitions for Objects
If the data content of the object is reasonably small, it can be defined by including the data itself in the <object> tag, this is called an inline definition:
<object data=”data:application/x-oleobject;3300,FF00,E3A0, …etc… “></object>
This isn´t very common as the amount of data needed for inline definition is usually quite impractical.
Inserting Images with an <object> Element
One interesting proposal in HTML 4.01, as we´ve seen, is the use of the <object> element to embed ordinary graphics files, such as GIF and JPEG files. In its most basic form the use is simple:
<object data=”wroxLogo.gif”></object>
The data attribute works just like the src attribute in an <img> tag, but can also accept inline data where the image is small. This can speed up the time to view of a page, by reducing the number of
<object type=”image/jpeg” data=”data:image/jpeg;3300,FF00,2756,E5A0,E3A0,22F6, …etc… “></object>
However, unlike the <img> element, which will display a graphic in the browser with this minimal information, this isn´t enough for
By adding the usual width and height attributes common to the <img> element, and adding the MIME type in the type attribute, the image will be displayed in Internet Explorer with the following code:
<object type=”image/gif” data=”wroxLogo.gif” width=”100″ height=”100″ > This is our Wrox Logo</object>
While adding the height and width now means that we can see the image in Internet Explorer, all is still not well:
Looking at the result, we can see an example of a container with the <object> element. Unlike the <img> element, in Internet Explorer (versions 4 to 6) the <object> element doesn´t use the default size of the file to size the container. The height and width we´ve specified are used to size a frame, which contains the <object> element itself, but not the image. Because it´s larger than the available space, the browser automatically adds scroll bars.
Of course, the “proper” way to size an element in HTML 4.01 is to use style sheets to specify the height and width styles. Below, we´ve used the width attribute in an inline style sheet for brevity. This code produces the same page as above:
<object type=”image/gif” data=”wroxLogo.gif” style=”width:100px; height:100px”> This is our Wrox Logo</object>
However, this doesn´t solve the problem of the scroll bars. Resizing the image container so that it fits the image also doesn´t solve the problem:
<object type=”image/gif” data=”wroxLogo.gif” style=”width:105px; height:105px”> This is our Wrox Logo</object>
Now the horizontal scrollbar is removed, but the vertical one remains, although it is now inactive:
In Internet Explorer therefore, we can´t use images inside the <object> element without incurring an unsightly scrollbar. This makes it unusable until