Extra spaces in my tag list

[sally_maria]

Last year, I posted about getting a comma-separated list for my tags, and somebody helped me to sort it out.

Somehow, though, changes in the site or my layout mean that it no longer works quite right, and I was hoping somebody might help me to fix it.

The problem is with the commas after each item - there is always a space first, so the commas look rather odd.

At the moment I'm using

.module-tags_cloud .module-list-item { font-size: 12pt !important; }
.module-tags_cloud .module-list-item:after{content: ", "; }
.module-tags_cloud .module-list-item:last-child:after{content: " "; }

Thank you for any help you can give me.

Comments

[foxfirefey]

What browser are you using? I don't see an extra space, myself.

[matgb]

I'm seeing it in Firefox, I think it's coming from the invisible bit with the tag number in it.

[sally_maria]

Firefox 3.6.15 on Linux, as my main browser, but I also checked it in Chromium and the Firefox 4 beta, and it does the same thing.

Try this:

[marahmarie]

Erase what you've got and put this in instead:

.module-tags_cloud .module-list-item { font-size: 12pt !important; }
.module-tags_cloud .module-list-item:after{content: ","!important; margin-left:-.2em!important;}

.module-tags_cloud .module-list-item:last-child:after { content: ""!important;}

Not only fixes the problem but that last line removes the last comma, too (I went to town on this one - hope it works).

Re: Try this:

[sally_maria]

That is so much better, thank you very much. :-)

There's still one comma that insists on wrapping itself to the beginning of the next line, but it's such an improvement.

Re: Try this:

[marahmarie]

If you have "visibility-private" tags, my code might not work perfectly (but it should apply to all tags within the tags list, so I'm not sure why it would fail on locked tags). Just checked, and I'm not going to screen-cap it because I'm fairly sure you'll believe me, but I'm not seeing the wrapping comma (Firefox 3.16 - haven't upgraded to 4 yet - maybe that's it?)

Re: Try this:

[sally_maria]

I'm still using 3.6 myself (I need to make sure I can get LJ Hook to work before I upgrade ;-D) but I think I've worked out what the problem is - I checked in Chromium, and there is a mis-placed comma but it's a different one.

I think it's all about which system font you are using, and how that works with the fixed size of the side-bar, if a line happens to be too long, it wraps onto the next line.

Honestly, this looks so much better than it did before, I can live with one odd comma. Thank you very much for sorting this out for me.

[matgb]

Right, I'm guessing at what's causing it, and I'm guessing at an answer, although I'm not confident it'll work. At the moment, the code inserts a comma after each entry, let's try putting it before. so item:after becomes item:before and last-child becomes first-child, ergo:

.module-tags_cloud .module-list-item { font-size: 12pt !important; }
.module-tags_cloud .module-list-item:before{content: ", "; }
.module-tags_cloud .module-list-item:first-child:before{content: " "; }

But as I'm not sure I'm right on what's causing it, I have low confidence it'll solve it.

[sally_maria]

Unfortunately putting it before doesn't help.

Back when I sorted this out originally, the code I had put it before, and I had the space problem. When we moved it to after, the space went away.

Then at some point, something changed and the space came back.