tweaking category sub styles

[ktomas]

I'm working on my navigation (using the categories sidebox), and want to switch the way the SPAN.category-subs-parent classes are marked up.

To avoid being incredibly confusing, take a look at how my navigation is currently displayed HERE.

You'll see each sub category with a dashed line underneath. The code to accomplish this is done like this

A.category-subs, A.category-subs:visited {
	border-bottom:2px dashed #B15148;
	border-color:#B15148;
	color:#4D4D4D;
	display:block;
	font-family:Georgia,"Times New Roman",Times,serif;
	font-size:18px;
	font-weight:bold;
	letter-spacing:3px;
	line-height:1;
	padding-bottom:13px;
	text-decoration:none;
	}

What I want, is for the selected subcategories to lose the underline, that way the hierarchy tree won't be interrupted by the dashed line.

The current markup looks like this

<a class="category-subs" href="http://www.sweetjujubead.com/catalog/index.php?main_page=index&cPath=11_1_2">
<span class="category-subs-parent">     Gold Band</span>
</a>

If I could wrap the ENTIRE selected category in the "category-subs-parent" class, then I think I could set it to border: none; and accomplish what I'm looking to do.

The markup would look something similar to

<span class="category-subs-parent">
<a class="category-subs" href="http://www.sweetjujubead.com/catalog/index.php?main_page=index&cPath=11_1_2">Gold Band</a></span>
</a>

I hope this isn't as complicated as it sounds. Any ideas?

[niccol]

Wouldn't it be simpler just to change the underline to an overline?

border-bottom:2px dashed #B15148;

becomes:

border-top:2px dashed #B15148;

You might have an extra line at the top to get rid of and one to add at the bottom but that shouldn't be too hard.

[tony_sar]

try this , is a long shot ..
add this to your stylesheet.css and see if works. i can not make it work remotely .

a.category-subs:visited {
border:none;
}

[niccol]

If you use the pseudo-class 'visited' then it will apply to any of the links that have been visited even if you get it to work. What you want is the pseudo-class 'active', but that has loads of browser issues.

If you apply the dashed border to the top of category-top and the top of category-subs you are pretty much there as the screenshot shows (obviusly you are going to need to adjust the padding) At least crystal and pearl appear to be grouped with 'gold band'.

If you want to get rid of the border above the first level of category-subs, i.e. gold band, then that might be trickier.