[SOLVED] Simple CSS problem - taking forever :/

[StroiX]

Please refer to the following web site: http://alturl.com/iio4

 

As you can see in the above mentioned web site, there is a "|" menu link divider which displays between the links (About, Events, Teams, Shop).  I don't want it to however appear at the end of the last link (shop).  I have tried several things but can't seem to get the CSS to remove it just after the last link.

 

Any help with this would be greatly appreciated.  Following is both HTML and CSS code:

 

<div id="navigation">
<a href="/about" class="navigation-about">About</a>
<a href="/events" class="navigation-events">Events</a>
<a href="/teams" class="navigation-teams">Dance Teams</a>
<a href="/shop" class="navigation-shop">Shop</a>
</div>

 

/***** Navigation *****/

#navigation {
    background:url(../_images/menu_bg.png) repeat-x;
height:68px;
width:100%;
padding:10px 0 10px 0;
margin:0 0 20px 0;
}
/*#navigation a { color:#666; padding: 0 10px 0 10px; text-decoration:none; }*/


.navigation-about, .navigation-events, .navigation-teams, .navigation-shop {
    float: left;
    display: block;
    padding: 0 0 0 12px;
    font-size: 105%;
}

#navigation-logo {
display:block;
float:left;
margin:3px 0 0 10px;
padding-right:25px;
}

#navigation a, #navigation a:visited {
display:block;
text-decoration:none;
color:#666;
padding:0 10px 0 10px; 
background-image:url(../_images/nav_divider.png);
background-repeat:no-repeat;
background-position:right;
font-weight:bold;
}

 

Thank you once again!  If possible.. pleaseeeee provide a working CSS so I do not misunderstand you.

 

[gevans]

You could just add a class for the last link.

 

<div id="navigation">
<a href="/about" class="navigation-about">About</a>
<a href="/events" class="navigation-events">Events</a>
<a href="/teams" class="navigation-teams">Dance Teams</a>
<a href="/shop" class="navigation-shop" class="last">Shop</a>
</div>

 

and get rid of the image

 

#navigation a.last{
background-image: url();
}

[StroiX]

gevans,

 

Thanks for your suggestion...  I tried it but it still did not remove the divider from the end of the 'shop' link.

 

 

[StroiX]

 

I take that back, it did work!  Just had to change the html to: <a href="/shop" class="navigation-shop last">Shop</a>

 

Thank you soo much!!!