Richard Parnaby-King

Web Developer – PHP, Zend Framework and Actionscript 3

Posted on | | 3 Comments

The pseudo classes :before and :after are CSS selectors that allow developers to prepend and append content and/or extra styling to elements. Unfortunately, these selectors are not available in Internet Explorer versions 6 and 7. There are a number of javascript fixes that will force IE6 and IE7 to enable the pseudo classes (such as https://code.google.com/p/ie7-js/), however these can be slow to download and, with the crappy JavaScript engines these browsers have, be slow to implement the fixes required to make them compliant browsers.

Fortunately, there is an alternative.

Solution

An alternative is to use the following in your css file.
[css]
.selector {
*zoom: expression(
this.runtimeStyle.zoom=”1″,
this.appendChild( document.createElement(“small”) ).className=”after”,
this.insertBefore( document.createElement(“small”), this.firstChild ).className=”before”
);
}

.selector .after, /* IE6/7 */
.selector:after {
/* styling here */
}

.selector .before,
.selector:before {
/* styling here */
}
[/css]

This method is faster than downloading a separate javascript file which then has to implement every ie6/7 fix to make it a compliant browser.

The selectors can be maintained in the same css file (does not need to be placed in separate ie-only css file) and all the code can be grouped together.

Category: CSS

Posted By:

Comments

  • ABOUT

    Having fifteen years of programming experience in PHP, Zend Framework and ActionScript3, I have a very strong working knowledge of object orientated programming.

    I am a PC Gamer! Playing FPS, RTS, RPG and the occasional MMO since 1996 I have a huge number of a variety of fast-paced games.

  • Recent Posts

  • Categories

  • SUBSCRIBE TO OUR FEED