Skip to main content

I've been playing with the OBJECT element, which has been around for ages, but was never much used because Netscape 4 didn't support it. I don't care about Netscape 4, but I do care about Internet Explorer for Windows. Here's my problem:

I want to replace the IMG element. Why, you ask? Because I'm a markup wanker who won't leave well enough alone. Also, IMG has been removed from XHTML 2.0, in favor of OBJECT, and I'm wondering if there's a smooth migration path. The question of the day is: Can we start using OBJECT now to replace IMG?

This is old-style markup:

<img src="" alt="A beagle sitting in a woman's lap" width="152" height="160" />

Which produces this image:

A beagle sitting in a woman's lap

This is new-style markup:

<object type="image/jpeg" data="" width="152" height="160">A beagle sitting in a woman's lap</object>

Which produces this image:

A beagle sitting in a woman's lap

I think the parallels speak for themselves. My problem is with Internet Explorer. (There may be other problems with other browsers that I don't know about yet. Leave messages in the comments if you can't see this image at all.) The IMG-based image and the OBJECT-based image look identical in Mozilla and Opera. However, in Internet Explorer for Windows, the OBJECT-based image has internal padding within the OBJECT. Since the image is the same size as the OBJECT, this means we get ugly scroll bars. There is also a visible border around the OBJECT.

Now, I know a little about CSS, but none of the obvious tricks to get rid of this padding or border have worked. Searching Google for information about the OBJECT element is almost fruitless, since object is a very generic term, and all of the examples focus on embedding multimedia or Java objects. For example, here is the MSDN documentation on OBJECT, which notes both a BORDER attribute and a border style property, neither of which removes the visible border, and a full complement of padding style properties, none of which remove the padding.

Basically, nobody actually uses the OBJECT element this way (because IMG is easier and more direct, and also possibly because it doesn't work in Internet Explorer -- that's what I want to find out), but if the W3C gets its way, everyone will in the future.

Update: thanks to several commenters, I have found these references:

Update #2:: in case I'm a wanker who can't leave well enough alone is not a good enough explanation for you, this comment goes into more depth about why I am bothering.