How do you work around IE not supporting :after?

Question

I've got a bunch of lists

<ul>
  <li class="first">Item 1</li>
  <li>Item 2</li>
  <li class="last">Item 3</li>
</ul>

styled with

li:after {
  content: ' / ';
}
li.last:after {
  content: '';
}

This has to be a sort of commonplace problem. I'm thinking i could either clutter the html and put in intermediary <li>'s containing the character, or i could hook on a javascript to put them in there if IE is the loading browser, but that wouldn't catch people without javascript. Iuno. I'm leaning towards cluttering the html but I'd like to hear if there are some opinions on this.

Answer 1

Internet Explorer (IE) doesn't support the :after selector, we must use some hack instead, for example this one:

li { scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + 'xkcd150') : ''); }

"xkcd150" - this one will be added after each <li>.

its an expression, which usually used to replace and fix some IE bugs.

So, the full code is:

li { scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + ' / ') : ''); }

li.last {
scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + '') : ''); }

The first lines adds " / ", and the second is used to add nothing.

All the code must be added into your css file.

Answer 2

Here's an idea you won't like. 8-) Put your / symbols in as background images, in the right padding of the <li>s.

Answer 3

1. Use the IE7.js hack to add after pseudoelement support.
2. Use conditional comments to add to the markup to simulate that effect or to remove some of the existing style to make it easier to read without dividers -- eg, let the list items stack in a stylesheet in a conditional comment
3. Allow IE6 to degrade gracefully by rearranging the style so this doesn't happen, even if it looks different in other browsers.

Answer 4

I just do it in the server-side language when generating the list HTML. I suppose that would be considered "cluttering the HTML".

Answer 5

If your content is not intented to change at runtime, you could use the following :

.icon-glass {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}

If your content is intended to change at runtime, you could do something like this :

.icon-glass {
  *top:expression(0, this.innerHTML = '');
}

Unfortunately, this is extremely slow. While it is likely to work in IE6 with a significant reduction of your performance, IE7 is likely to crash if you have too many icons on your page. So I wouldn't recommend this second technique unless you use only very few icons and you can afford the performance reduction.

Answer 6

I use javascript and conditional comments. i.e. using jQuery.

 <!--[if IE 6]>
   <script type='text/javascript'>
     $(document).ready( function() {
      $('li').not('li.last').after('/');
     });
   </script>
 <![endif]-->

It is offcourse better to use a seperate JS file.
This also has the disadvantage that you have to write everything twice since you put it in CSS for good browsers and again in javascript for IE6.

Answer 7

Try using something like jQuery.

`$(function(){

$('li').not(':last-child').append('\'');

});`

It doesn't clutter up the html. Also, to make this only work with IE, try using jquery compatibility.

Answer 8

And if IE would support last-child you would not need to do the class="last" :P.

IE support has been and will continue to be crap. IE 8 has made massive improvements, :after and :before work as you would expect, IE 7 supports them as well. Just target those two, especially since Microsoft is pushing IE 8 out over Windows Update.