Software Guide

Hinweis für deutschsprachige Leser: Dieser Artikel ist ausnahmsweise in Englisch aufgrund der Relevanz und dem Querverweis vom WordPress-Plugin Link Indication.

Once in a while it is necessary to add little inline images next to words or links when designing a website. It’s recommended to use CSS for this purpose, in the following an example that adds an image to the right side of a link.

CSS:

a.liexternal {
	background: url(images/icon.gif) no-repeat right;
	padding-right: 10px;
}

HTML and output:

Problem

That is working well with all browsers except Internet Explorer: If a word-wrap is needed, the Internet Explorer fails. It displays only a part of the image, but not at the correct position. See the following examples.

Firefox, Opera:

Internet Explorer 5.5, 6, 7:

First solution

The blue moped bloghas evaluated this issue and recommends the following solution: Using display: inline-block in the CSS:

a.liexternal {
	background: url(images/icon.gif) no-repeat right;
	padding-right: 10px;
	display: inline-block;
}

However, using display: inline-block causes the follwing issues:

• All current CSS validators are checking CSS according to CSS2, but display: inline-block is not valid acc. to CSS2, therefore an error occurs. But display: inline-block is correct according to CSS2.1: When you use the validator at jigsaw.w3.org, you can select „CSS2.1“ and finally your CSS will be valid.
• The Opera browser changes the height of elements and moves them a few pixels to the top:
  

Final solution

display: inline-block should be applied only if visitors are using the Internet Explorer. So I recommend creating an additional CSS file where you apply display: inline-block to the according elements:

a.liexternal {
	display: inline-block;
}

Apply this additional CSS file by using conditional comments in the head of the HTML:

<!--[if gte IE 5.5]>
	<style type="text/css" media="screen">
  		@import url( styles/style_ie.css );
	</style>
<![endif]-->