CODEWITHSUNDEEP
csslisthtml-lists
Rollin
Rollin

Reputation: 131

inline list li:last-child:after { content: ", "} Can I get rid of the extra space it creates?

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

Upvotes: 3

Views: 4844

Answers (2)

Vojtech Semecky
Vojtech Semecky

Reputation: 175

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

li.artistlist:after {
    content:",\00a0";
}

Upvotes: 3

stefanglase
stefanglase

Reputation: 10402

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>

Upvotes: 3

Related Questions