Question

I have the following code:

.taglist li{
display: inline;
}

.taglist li:after {
content: ", ";
}

.taglist li:last-child:after {
content:"";
}

it takes an unordered list of tags and makes it into a nice comma separated list. Of course in IE7 and earlier there is no space between the list. I’m wondering if anyone has any ideas on how to still use the list technique, but have it not look horrible in older versions of IE.? I tried also adding some margin-right to the li, but it pushed some of the text out of its container and caused it to wrap in very strange ways.

It might not be practical to do this, but it struck me as the most semantic way.

Answer 1

Of course in IE7 and earlier there is no space between the list. I’m
wondering if anyone has any ideas on how to still use the list
technique, but have it not look horrible in older versions of IE.?

If just adding a small gap after each li in only IE7 and lower is good enough, use this:

.taglist li{
    display: inline;
    *padding-right: 6px; /* adjust to taste */
}