Software Guide

Die besten Tipps, Anleitungen und Downloads

Ihre Werbung auf Software Guide

Sie möchten in dieser Box oder an anderer Stelle dieser Webseiten eine Werbung schalten? Sehen Sie sich dazu am besten einfach mal die verschiedenen Möglichkeiten an.


Inline Wrap Bug of Internet Explorer

24. April 2006 von Michael | Webmaster/CMS/Blog

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:
Applying Image

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:
Result Firefox

Internet Explorer 5.5, 6, 7:
Result Internet Explorer

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:
    Opera result

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]-->

Informationen zum Artikel:

Weiterblättern im Blog:

Was ist ein Trackback?

4 Trackbacks/Pings: