Underline CSS Help

[creepycreatures]

I have a small annoyance on my list of categories and sub-categories whereby due to the indentation of the sub-cats I get a small white line appear on the left-hand-side.

It's hard to explain but I'm sure you'll understand from the pic.

I'm presuming this is easily solved in the stylesheet and I'd imagine it's something to do with this section:

/* categories box parent and child categories */
a.category-subs, a.category-products {
color: #ffffff;
display: block;
width:140px;
float:left;
text-decoration: underline;
}
#categoriesContent, #documentcategoriesContent {
position:relative;
}

#categoriesContent a, #documentcategoriesContent a {
margin-left:10px;
}

#categoriesContent em, #documentcategoriesContent em {
position: absolute;
right: 10px;
}

SPAN.category-subs-parent {
font-weight: bold;
}

SPAN.category-subs-selected {
font-weight: bold;
}
/* end categories box links */

I want to keep the underline and the small green icon, but remove the underline from the indentation part so the white line goes away.

Any help appreciated!

[kuroi]

This can't be investigated from a screenshot and some CSS. We need to see the actual site and understand the interaction between the HTML and the CSS.

[creepycreatures]

Thanks for the reply, the site is www. creepy creatures online.co.uk/buy

[tony_sar]

that extra space might be set in your admin

Configuration > layout setting

look for
Categories Separator between the Category Name and Sub Categories

and see if there is _ or extra space was set

[tony_sar]

using FF , I don't see space between link as per image posted . but with IE , well, I can not even connect to your site with IE7 .

[kuroi]

This can't be resolved in the stylesheet since that's doing exactly what it's supposed to. Your underlining is being applied to the A tag which includes two leading spaces for indentation and then your image. There's no way to split the up the A tag in with CSS alone. You would need to adjust the HTML to do that.

Happily, that's not too difficult as you can do it via the Admin. Here's how ...

Go to Admin > Configuration > Layout Settings and remove both the "Categories SubCategories Indent" and "Categories Separator between the Category Name and Sub Categories" fields. I suspect that the latter will clear out your image.

Now you will have underlining that covers only the A tag, but will have lost your indentation and image. We'll put them back via your stylesheet.

Find the "a.category-subs, a.category-products" styling at around line 680 of your stylesheet, where you added the underlining. Add some left-margin to push the link across to the right.

More complicated is adding back the image. Include it as a background image with non-repeat and a negative y-pos should get it into the right position.

Alternatively you may wish to consider the better categories add-in module, which is specifically intended to help achieve this sort of beautification of the categories sidebox.

[creepycreatures]

Thanks for the suggestions.

I've managed to find a quick fix by putting my image as the "Categories SubCategories Indent", instead of as the "Seperator between the category name and sub categories" as it was previously.

This seems to have removed the extra underlining and allows me to keep the image without editing any files.

I do have another question however- I've read numerous threads on the forum to try and implement a rotating header image, but all the links they provide are expired or the information is confusing. If anyone can help on this that'd be great. I have about 10 images I'd like to change between each time the page is refreshed (where the grassy image is on my site).

[kuroi]

I've managed to find a quick fix by putting my image as the "Categories SubCategories Indent", instead of as the "Seperator between the category name and sub categories" as it was previously.

This seems to have removed the extra underlining and allows me to keep the image without editing any files.

... as long as you only care about visitors using Internet Explorer or its derivatives.

[creepycreatures]

Well it's only a minor annoyance to be fair, so for the time being I'll leave it this way - can always have a go at editing it further in the future.

Any ideas on the rotating images?