How do you work around IE not supporting :after?

Question

I\'ve got a bunch of lists

  
Item 1
  
Item 2
  
Item 3
&l         


        

Answer 1

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

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 6

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.