text alignment in category sidebox

[bumba000]

Hi all,
O'kay. New store and a fresh copy of silverfish!
I have made a still and a rollover gif for my cat sidebox links.

I won't give you all the chance to see my poor attempts at css coding here today.

I will ask, what would be the best way to add my two images as a and ahover
with normal left alignment but have the text part of the link with a left margin of about 8em?

Thank You,
John

[gjh42]

a.category-top {
    padding-left: 8em;
    background-image: url(../etc);
    background-repeat: no-repeat;
    }
a.category-top:hover {
    background-image: url(../etc2);
    }

[bumba000]

That didnt work. it still let the images show and rollover but they ended up straight across the and half chopped off.

I can get them to show up just by changing a little of what comes in silverfish but cant align the text separate from the bg images.

John

[bumba000]

BOF SideBox Content
=================*/
/* 
leftbox
*/
#navColumnOne {background: url(../images/bg_sidebox.gif) repeat-y; vertical-align: top;}
#navColumnOneWrapper {}
.leftBoxContainer {background: transparent;}
.leftBoxHeading {text-align: center; margin: 0em; background-color: #abbbd3; padding: 0.5em 0.2em;}
h3.leftBoxHeading {font-size: 1em; margin: 0em; background-color: #1D5685; background-image:url(../images/bg_box_header.gif); padding: 0.5em 0.2em; color: #ffffff;}
h3.leftBoxHeading a {font-size: 1em; color: #ffffff;}
h3.leftBoxHeading a:hover {color: #FFFF33; text-decoration: none;} 

/* 
rightbox
*/
#navColumnTwo {background: url(../images/bg_sidebox.gif) repeat-y; vertical-align: top;}
#navColumnTwoWrapper {}
.rightBoxContainer {background: transparent;}
.rightBoxHeading {text-align: center; margin: 0em; background-color: #abbbd3;    padding: 0.5em 0.2em;}
h3.rightBoxHeading {font-size: 1em; margin: 0em; background-color: #1D5685; background-image: url(../images/bg_box_header.gif); padding: 0.5em 0.2em; color: #ffffff;}
h3.rightBoxHeading a {font-size: 1em; color: #ffffff;}
h3.rightBoxHeading a:hover {color: #FFFF33;    text-decoration: none;} 
/* 
sidebox common
*/
.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {color: #FFFFFF;}
.sideBoxContent {background-color: #ffffff;    padding: 0.4em;    font-size: 1.1em;    background-color: transparent;}
.wrapper {font-size: 1.2em;}    
.sideBoxContent ul{margin-left: 10px; padding-left: 0;}

/*
sidebox links
*/
A.category-top {color: #900 !important; width: 100%; margin: 0px 5px 0px 0px !important; background-color: #ddd !important; padding: 2px 0px 2px 0px; border: 1px solid #fff; background-image: none !important; display: block; text-decoration: none;}
A.category-top:hover {background: url(../images/cat_top_hover.gif) repeat-x 6px 0em !important; color:#fff !important;  border: 1px outset #f00;}

A.category-subs {background-color: transparent; background-image: url(../images/cat_subs_arrow.gif); background-repeat: no-repeat; background-attachment: scroll; display: block; text-decoration: none; width: 100%; padding: 3px 2px 3px 15px; background-position: 13px 0.45em !important;}
A.category-subs:hover {width: 90%; padding: 3px 2px 3px 15px; background-position: 13px 0.45em !important; border: 1px solid #aaa; display: block; text-decoration: none;}

A.category-products {background-repeat: no-repeat; background-attachment: scroll; display: block; text-decoration: none; width: 100%; padding: 3px 2px 3px 15px; background-position: 13px 0.45em !important; background-image: url(../images/cat_prod_bullet.gif);}
A.category-products:hover {width: 90%; padding: 3px 2px 3px 15px; background-position: 13px 0.45em !important; border: 1px solid #aaa; display: block; text-decoration: none;}

A.category-links, A.category-links:visited { color: #900 !important; width: 100%; margin: 0px 5px 0px 0px !important; background-color: #ddd !important; padding: 2px 0px 2px 0px; border: 1px solid #fff; background-image: none !important; display: block; text-decoration: none;}
A.category-links:hover {background: url(../images/bg_box_header.gif) repeat-x 6px 0em !important; color:#fff !important; border: 1px outset #00f;}

/*=================
EOF SideBox Content

[gjh42]

What part of it didn't work? And how did it look?
What are the background images supposed to look like? Are they supposed to fill the column? Ok, you are using display: block; to make the links expand to fill the sidebox, so bg images should be able to be full width. What did you intend to say with "straight across the and half chopped off"?

Also, did you edit the css you show here, or somewhere else? Much of this is labeled !important, so you would not easily override it.