JavaScript is disabled!

IEinlineIcons

IEinlineIcons();

This jQuery plugin adds an IEinlineIcons() method that appends a span with a non-breaking space to the matched elements in Internet Explorer as a placeholder for an icon. This is sometimes needed as IE has problems with the placement of background images at the end of inline elements that span 2 or more lines.

For now, the method is based on ltr text direction only.

Returns

jQuery object

DOM alterations

Appends <span class="jsInlineIcon">&nbsp;</span> to all matched elements and adds the following hooks:

  • on matching elements:
    .jsIEfix
  • on appended span:
    .jsInlineIcon

Examples

<ul class="moreInfo">
    <li><a href="#">Screenshots</a></li>
    <li><a href="#">Example code</a></li>
    <li><a href="#">Guidelines</a></li>
</ul>

Here $(".moreInfo a").IEinlineIcons(); will result in the following DOM structure if the browser is identified as Internet Explorer:

<ul class="moreInfo">
    <li><a class="jsIEfix" href="#">Screenshots<span class="jsInlineIcon">&nbsp;</span></a></li>
    <li><a class="jsIEfix" href="#">Example code<span class="jsInlineIcon">&nbsp;</span></a></li>
    <li><a class="jsIEfix" href="#">Guidelines<span class="jsInlineIcon">&nbsp;</span></a></li>
</ul>

The classNames that are added can be used like this in CSS:

.moreInfo a,
.moreInfo a.jsIEfix .jsInlineIcon {
    padding-right: 16px;
    background: url(ico_link.png) transparent no-repeat 100% 0.45em;
}

.moreInfo a.jsIEfix {
    padding-right: 0;
    background-image: none;
}

Here the links are given a padding on the right side in which a background image is positioned. The same goes for the appended spans. In order to avoid double padding and images both padding and background image are reset on links that have the className "jsIEfix".

Downloads

jquery.ieinlineicons-0.1.js (736 bytes)

Versions