Styling main nav problems

[freshlydesigned 1]

Hi there, I am trying to add some borders to my main nav menu, specifically the tab that is displayed with a background when you are on THAT page. Have used Firebug to try and get correct classes but it is never clear as you think and is driving me nuts. This is the sort of thing I've been adding to custom CSS but to no avail. .menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item { border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-style: solid; border-left-style: solid; border-left-style: solid; border-top-color: #000000; border-top-color: #000000; border-top-color: #000000; } Link to site is here http://www.salesgym-training.com/clients/ Thanks Jamie

[catrina 103]

You're getting there with the selector to use. It just needs to be more simple. I also simplified your CSS:

ul#menu-main-nav li.current_page_item {
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;}

[freshlydesigned 1]

Thanks Catrina that's really helpful. :-) One thing I am still struggling with is I can't seem to avoid having slight runover at the the bottom of the left and right borders. If I shift the background down 1 px I get a solid line that comes from this line. #nav_row.main_nav, ul.sf-menu ul li Also, using firebug as a selector, is it ever conclusive which line of CSS you have to edit or does it come down to experience? I always seem to have adjust loads of different classes before finding the right one, it's frustrating.

[catrina 103]

Add this code instead of the one I gave you above:

ul#menu-main-nav li.current_page_item {
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-bottom: 0px solid #000;}