Life @ High Road Communications

I came across an strange display bug (?) in IE8 with how it renders inline imagery that is wrapped with an element that has a position of absolute.

Here’s a quick example to give you  an idea of what I’m talking about. Typically – and  depending on the design – I use absolute positioning to fix the corporate logo of the site to the page, and this is always setup as a hyperlink to the Home page.

<a class="logo" href="/">
	<img alt="ACME Inc" src="logo.png" width="100" height="50">
</a>

I then style the <a> tag to be something like this:

.logo {
	left: 20px;
	position: absolute;
	top: 20px;
}

This will work in every browser with the exception of IE8. For some reason, IE8 does not like it when an image’s parent element is absolutely positioned. When this is the case, IE8 will not render the image at all – only the styling that has been applied to the <img> will be displayed (i.e. padding, borders, background color, etc.).

The quick workaround to this is to instead style the <img> tag directly:

.logo img {
	left: 20px;
	position: absolute;
	top: 20px;
}

This sort of bug also seems to happen in other circumstances as well, even when the image is not being absolutely positioned, so its something to keep your eye on as it can be easy to assume that “it will just work” if perhaps a thorough browser check is not being done to the HTML templates and/or Web site. ;)