CSS and object element styles

I made several tests on the object element since 2008. The results of these tests are not changed very much during the last two years, even though browsers are changed very much. smile The first thing to understand is simple: an object element is an inline-block element. As such, is displayed by default as an image, that is, on the same line of other inline content. But this element also accepts a width and an height, just as images do. The second thing is that this object is a replaced element. In other words, the actual content of object is rendered using an external source, for example a file.

Take a look at this code:

<div>
  <object data="movie.swf" type="application/x-shockwave-flash" width="500" height="300"></object>
</div>

To be displayed on a web page, an object element needs to have at least its dimensions set with the width and height attributes.
In this case, the actual content of this element will be fetched from the URL provided in its data attribute. Now, everything related to the rendering of the content of this element is up to the browser, or, more precisely, to the application that allows the browser to display the element. In this specific case, the Adobe Flash plugin will handle this element. In other cases, such as for videos or audio files, the rendering will vary depending on the application in use.

Bear in mind that you don't have any control over the rendering of the content inside an object element. Instead, with CSS you can control its:

1. width
2. height
3. positioning
4. floating
5. borders (partially supported in IE8 and lower)
6. margins and padding
7. background (this varies from browser to browser)

The use of each of these properties depends on whether this element is still displayed as an inline-block element or a block-level element. For example, to absolutely position an object within the viewport, you can write this:

object {
	position: absolute;
	display: block;
	width: 400px;
	height: 300px;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -200px;
}

The display property here is used only to get consistent results in IE6, because when an element is absolutely positioned its display role always changes to block (same applies to floating). Instead, this declaration is useful when you have to display fluid objects with percentages:

div {
	width: 40%;
	height: 300px;
}

div object {
	width: 100%;
	height: 100%;
	display: block;
}

Other features, such as borders and background colors, are not consistently supported across browser so that you should always try to stylize a parent element to get the desired result.