Text on categories sidebox

Here is my issue..

I have customized my categories sidebox and added rollovers (as background images) behind the categories. That part seems to be functioning fine so far.

The problem I am facing is the text over the buttons. It is aligned to the left but is is right on the left edge of the button which looks bad when I hover over..

When I edit the CSS to move over to the right a little.. it also moves the button(background image).

Do I need to apply a different style for the text only?? Or am I just overlooking something that is already there in the CSS?

Any help is greatly appreciated.
Oh and here is a link to the sidebox to check it out. http://activatemediainc.com/demo_store

Thanks,

SirBuck:

Here is my issue..

I have customized my categories sidebox and added rollovers (as background images) behind the categories. That part seems to be functioning fine so far.

The problem I am facing is the text over the buttons. It is aligned to the left but is is right on the left edge of the button which looks bad when I hover over..

When I edit the CSS to move over to the right a little.. it also moves the button(background image).

Do I need to apply a different style for the text only?? Or am I just overlooking something that is already there in the CSS?

Any help is greatly appreciated.
Oh and here is a link to the sidebox to check it out. http://activatemediainc.com/demo_store

Thanks,

open includes/templates/arc_custom/css/stylesheet.css

find the following declarations and make the highlighted changes - save the file and upload to your server.

A.category-top {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff !important;
width: 100%;
margin: 0px 0px 0px 6px !important;
padding: 0px 0px 0px 0.3em;
background-image: url(http://www.activatemediainc.com/demo_store/images/new_template_images/button_up.jpg) !important;
background-repeat: no-repeat;
height: 24px;
display: block;
text-decoration: none;
line-height: 24px;
}
A.category-top:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff !important;
width: 100%;
margin: 0px 0px 0px 6px !important;
padding: 0px 0px 0px 0.3em;
background-image: url(http://www.activatemediainc.com/demo_store/images/new_template_images/button_over.jpg) !important;
background-repeat: no-repeat;
height: 24px;
display: block;
text-decoration: none;
line-height: 24px;
}

Find this in your stylesheet and adjust the highlighted entry to your taste

A.category-top {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff !important;
width: 100%;
margin: 0px 0px 0px 6px !important;
padding: 0px 0px 0px 10px;
background-image: url(http://www.activatemediainc.com/demo_store/images/new_template_images/button_up.jpg) !important;
background-repeat: no-repeat;
height: 24px;
display: block;
text-decoration: none;
line-height: 24px;
}

Clyde was faster on the draw!!!

Awesome! That was it.
Thanks to both of you. I knew it had to be something I overlooked.

Ok I am having another problem that might be related. Can someone take a look at http://activatemediainc.com/demo_store with Internet Explorer..

The very first link (the Apparel link) in the categories sidebox is pushed over to the left. All of the links after that are fine.

Also a not.. this is only happening in IE. The other browsers have no problems.:frusty:

I appreciate the help.

thanks