views:

409

answers:

8

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.

+1  A: 

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

Chad Birch
do you do it for all clients and not bother with the css at all or do you pinpoint IE from its user-agent?
xkcd150
I just always do it, :after isn't a particularly well-supported selector at the moment, unfortunately.
Chad Birch
:after is well-supported in browsers released after 2001. The user agent is not reliable, especially for deciding browser capability.
Anonymous
+1  A: 

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

RichieHindle
are you serious :D is that what you usually do?
xkcd150
I've only used vertical bars in this context, not slashes, in which case you can use border-right (eg. the top navigation menu on http://entrian.com/source-search/)
RichieHindle
+1  A: 
  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.
Anonymous
ah, i forgot all about conditional comments. they have to be the most un-cluttery way to clutter up the html
xkcd150
A: 

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.

X-Istence
Figured i'd get modded into oblivion for this :PIE 8 in comparison to IE 6 is absolutely amazing and developing for it and other standards compliant browsers is easy. A box model that is not all screwed up, standards compliant rendering, or almost at least.On a website I am developing I have implemented not a single hack in the CSS and the site renders exactly the same in IE 8, FireFox, Chrome, Opera and Safari.
X-Istence
I'm guessing the mod down is really for this being a comment and not an answer.
Anonymous
well, if the client is fine with not targeting ie6, i won't. tbh i haven't kept up with ie8 developments, but it's good to hear it's not all bad.
xkcd150
A: 

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.

Pim Jager
+1  A: 

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.

Mike
I don't know whether to vote this up for extreme cleverness, or vote it down for being the evilest hack ever. 8-)
RichieHindle
this hack is an inline javascript, nothing more used. And... it works :)
Mike
A: 

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.

A: 

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.

CodeJoust