tags:

views:

163

answers:

1

I am having a problem where the last li element in a ul is pushing itself to the left further than the rest of all my pieces. Attached is a screen shot and my code.

I have tried using the last-child element but it doesn't work in Safari or Chrome.

#attending ul {
 display: inline;
 margin: 0 5px 0 0;
 padding-left: 0px;
}
#attending ul li {
 display: inline;
 list-style-image:none;
 padding: 5px;

}
#attending li:last-child { 
    margin-right:-4px; 
  }

Suggestions?

TIA, Chase

http://desmond.yfrog.com/Himg338/scaled.php?tn=0&server=338&filename=screenshot20100526at808.jpg&xsize=640&ysize=640

---------------EDITED----------------

#attending {
width: 230px;
margin:0 13px 5px 12px;
float: left;
background-image: url(...);
background-repeat: no-repeat;
text-align:center;
height:360px;
overflow:hidden;

}

<div id="attending">
            <h2> Who's Attending <div id="eventtitle">Converge </div></h2>
                <ul>
                <li><a href='http://www.last.fm/user/IthisProtector' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/30769977.jpg' alt='IthisProtector' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/Jordan1124' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46770143.jpg' alt='Jordan1124' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/redmedicine' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/1612965.jpg' alt='redmedicine' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/phillstac3' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/9373439.jpg' alt='phillstac3' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/hammajamma' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/1577940.gif' alt='hammajamma' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/tastemaker' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/31334281.jpg' alt='tastemaker' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/owlz' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/38409251.jpg' alt='owlz' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/cersei' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/16709925.png' alt='cersei' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/thenetsux' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46964551.jpg' alt='thenetsux' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/Shwang_Shwinga' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/36391855.jpg' alt='Shwang_Shwinga' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/NightEndDay99' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/23687175.jpg' alt='NightEndDay99' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/aliciabandee' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46562737.jpg' alt='aliciabandee' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/mcbaker2' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/5005584.jpg' alt='mcbaker2' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/killcarriedeadd' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46160823.jpg' alt='killcarriedeadd' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/sexraptor89' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/44930901.gif' alt='sexraptor89' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/Johnny_Acidtrip' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/45211001.png' alt='Johnny_Acidtrip' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/chrismarzig' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/41573869.jpg' alt='chrismarzig' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/Lapp0' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/29210613.jpg' alt='Lapp0' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/iozephus' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46560555.jpg' alt='iozephus' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/JoshTheChaos' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/41057871.jpg' alt='JoshTheChaos' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/ktdlmnop' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46312475.jpg' alt='ktdlmnop' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/RheannaReverie' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46435589.jpg' alt='RheannaReverie' height=40px; width=40px; style='border:0px;'/></a></li>                </ul>                
            </div>
A: 
Gaby
How would I go about centering this then again? I like the look of having it centered or is that just not possible?
codeisforeva
@Chase just understood the problem ... remove the `5px` right-margin from the `ul` and it should center correctly..
Gaby
Fixed it in firefox .. still issues in safari and chrome.
codeisforeva
works fine in my chrome and safari ... check the link in my answer with the code .. (*the `last-child` rule could be remove completely..*)
Gaby
Checked your code .. removed the last child rule and still no dice in chrome safari.
codeisforeva
yes i have found a couple of more issues.. you seem to have hit a weird scenario of issues.. not sure if there is an all-browser-inclusive solution with CSS .. you might have to alter your html as well..
Gaby
@Chase, the best i can achieve is at http://jsfiddle.net/HGavS/15/
Gaby
Ahh it works. You rock!
codeisforeva