3

http://forumgallery.rollinleonard.com/artists.php

I can't seem to get rid of the space before the comma in my list.

It makes no sense!

Here is the relevant part of my CSS

.artistlist {
    margin: 0px;
    padding: 0;
    }

li.artistlist {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: .75em;
    line-height: 1.5em;
    word-spacing: 1px;
    }
li.artistlist:after {
    content:", ";
    }
.artistlist li:last-child:after {
    content:"";
    }
ul li{
    margin:0;
}
Brian Deragon
  • 2,929
  • 24
  • 44
Rollin
  • 131
  • 1
  • 4
  • 12

2 Answers2

3

I did a small demo with less CSS code that renders without a whitespace before the comma. Tested in Chrome and Firefox on Mac.

Looked at your updated page and found the problem with it. Read more about possible whitespace bugs within different browsers here: http://www.42inc.com/~estephen/htmlner/whitespacebugs.html

Your html looks like this:

<li class="artistlist"> 
     <a href="#" onMouseOver="ShowDiv('artist_2_1');ShowDiv('artist_2_2');ShowDiv('artist_2_3'); return false;" onMouseOut="HideDiv('artist_2_1'); HideDiv('artist_2_2'); HideDiv('artist_2_3'); return false;" class="inlinelistlink display">Davis Cone</a> 
        </li>

Try to remove the whitespace between your tags and it renders fine:

<li class="artistlist"><a href="#"  onMouseOver="ShowDiv('artist_2_1');ShowDiv('artist_2_2');ShowDiv('artist_2_3'); return false;" onMouseOut="HideDiv('artist_2_1'); HideDiv('artist_2_2'); HideDiv('artist_2_3'); return false;" class="inlinelistlink display">Davis Cone</a></li>
stefanglase
  • 10,296
  • 4
  • 32
  • 42
  • @codescape: your solution is correct, but the referenced document is extremely old - it refers to HTML 3 rules and the HTML 4 draft - which has been "in production" for quite some years now. I'm not sure if it still makes any sense... – MvanGeest Aug 10 '10 at 19:19
  • The whitespace gotchas still apply. Improved above demo to reflect this "bug": http://jsfiddle.net/sM5fT/ – stefanglase Aug 10 '10 at 19:36
  • wow. thanks. The only problem now is IE does not support last-child. Is there a way to fix that? Any hacky trickiness is fine. I just need it to work. – Rollin Aug 10 '10 at 19:50
  • Have a look over here: http://stackoverflow.com/questions/1293369/using-last-child-in-css – stefanglase Aug 10 '10 at 20:42
  • Thank you. I looked at that and implemented it already. Should I update my question to include that link or do you think people will see your comment there? – Rollin Aug 12 '10 at 14:51
  • Your question above concentrates on the unwanted spaces so I don't think so. The last-child-problem was more a special feature of your case. – stefanglase Aug 13 '10 at 04:34
3

For special chars like space you should use Unicode in the content. Try this:

li.artistlist:after {
    content:",\00a0";
}
Vojtech Semecky
  • 131
  • 1
  • 6