I'm creating menu in joomla (do not concern yourself should you not know joomla this is HTML-CSS related).
There's separator(like "|")
in between each menu.
this really is my code also on jsfiddle http://jsfiddle.net/WRuTC/
HTML
<div id="footerlinks"> <div class="module">
<div>
<div>
<div>
<table width="100%" cellspacing="1" cellpadding="0" border="0"><tbody><tr><td nowrap="nowrap"><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_content&view=article&id=1&Itemid=11">HOME</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_content&view=article&id=1&Itemid=12">ABOUT WLB</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_content&view=article&id=1&Itemid=13">KEY PERSONNEL</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_content&view=article&id=1&Itemid=14">CAPABILITIES</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_content&view=article&id=1&Itemid=15">PROJECTS</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_content&view=article&id=1&Itemid=16">CONTACT US</a></td></tr></tbody></table> </div>
</div>
</div>
</div>
</div>
CSS
#footerlinks .module td a {
border-right: 1px solid #79797A;
color: #515152;
font-size: 11px;
line-height: 42px !important;
padding-left: 7px;
padding-right: 7px;
text-decoration: none;
}
Now, the issue is this css puts separator at right side of menu, and that i don't want the final separator(not need right most separator) how do i ? any css selector?
you need to set the very first td:first-child
:first-child
works in most browser!
#footerlinks .module td a {
border-left: 1px solid #79797A;
color: #515152;
font-size: 11px;
line-height: 42px !important;
padding-left: 7px;
padding-right: 7px;
text-decoration: none;
}
#footerlinks .module td a:first-child {
border-left: 0px solid #79797A;
}
#footerlinks .module td a:last-child{border:0}
But it won't operate in ie<8. If you would like support also ie7 place border on left after which
#footerlinks .module td a:first-child{border:0}
If you wish to support ie6 you need to add class or style to last (you should use eq. jQuery for fixing it).
You should use CSS3's last-child
declaration to focus on the final item in your menu, like so:
#footerlinks .module td a:last-child {
border-right:none;
}
Granted, that's not highly supported in older browsers, by which situation you can easily concentrate on the menu-item class and take away the border after that. You are able to have a look in the supply of your page and have a look in the class added instantly by joomla for your food selection, e.g. item-24, item-23, etc.., and merely do that:
#footerlinks .module td .item-24 {
border-right:none;
}
Remove border from #footerlinks .module td a
and add this
#footerlinks .module td a + a { border-left:1px solid #79797A; }
#footerlinks .module td a:last-child {
border-right: 0;
}
#footerlinks .module td a {
border-left: 1px solid #79797A;
color: #515152;
font-size: 11px;
line-height: 42px !important;
padding-left: 7px;
padding-right: 7px;
text-decoration: none;
}
#footerlinks .module td a.first-child {
border-left: none;
}