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:

8 Comments:

Gravatar

1

Cybaer

12. Juni 2006, 15:29

Hi,

yes, this is the solution! Great idea! :)

But IE 5.5 is the first IE with „inline-block“! So this workaround should be loaded with IE 5.5+ and not with older IE’s. Therefore the Conditional Comment should be:

<!--[if gte IE 5.5]>

Regards, Cybaer

Gravatar

2

Michael (Author)

13. Juni 2006, 21:23

Thanks for your info, Cybaer, I have corrected it.

Gravatar

3

Steffen

22. Oktober 2006, 11:23

I created another possible solution. Which ist CSS valid in all cases and works without conditional comments.
Just use this CSS Definition:

padding: 2px 0 2px 20px;
background: url('images/icons/comment.gif') left center no-repeat;

You can use the position attribute twice. It Works ;)

Gravatar

4

Michael (Author)

28. Dezember 2006, 14:05

Steffen, sorry, I’ve missed your comment. Just adding „center“ as the second argument of background-position will not solve the IE problem when using a right aligned image.

Gravatar

5

Dicontas

16. Januar 2007, 16:32

this fix worked perfectly on WordPress with my new CSS file for IE

Gravatar

6

Stephan

12. Februar 2007, 7:23

Thanks for the info.

I played a little around. The problem is the hasLayout property from the Internet Explorer. Instead of
a.liexternal { display: inline-block; }
you also can use
a.liexternal { zoom: 1; }
to trigger the hasLayout property.

I use „height:1%“ to solve the Inline Wrap Bug in IE5.0. That works also for IE5.5 up to IE6.
* html a.liexternal { height:1%; }

Gravatar

7

theUg

16. Februar 2007, 7:46

There’s similar bug in Opera. If you use these styles within the paragraph, that is justified, some of the images show up out of place, like as if it shifts around, not sticking to the right edge of the container.

If text is left or right-aligned then it works fine.

Gravatar

8

Abu

9. Juli 2007, 5:52

Does anyone know how reliable suggestion #6 is?

Die Kommentarmöglichkeit ist derzeit für diesen Artikel ausgeschaltet.

Blog-Kategorien

Volltextsuche

Neueste Artikel

Neueste Kommentare

Neueste Trackbacks/Pingbacks

Andere Projekte

Blogparade

dient als zentrale Anlaufstelle für Blog-Paraden bzw. Blog-Karnevals und andere von BloggerInnen veranstaltete Aktionen.

Mediadaten

Feed-Statistik:
Feedburner

Software Guide gibt es seit Dezember 2005 und es werden durchschnittlich 4 Blog- Beiträge/Monat veröffentlicht. Die Themenschwerpunkte sind in der Tagcloud ersichtlich. Mehr Infos...

Links

 

Nach oben

Wordpress

© 2005-2016 Software Guide | ISSN 1864-9599