CSS Hover Help Reqd

Hi - thanks for stopping by!!

Ok heres my issue. I am trying to create a rollover on the sidebox. I have the rollover working but it will only display behind the text.

Eg:

CATEGORYTITLE (12) would show the image behind the TLE where I need it to display on the right of the containing box and not to the right of the text. It is worth mentioning that the image does not sit behind the numbers display, only the category name.

.sideBoxContent , .sideBoxContent a{
color:#ffffff;
	background-color: #000034;
	font-size: 1.2em;
	}

.sideBoxContent a:hover{
color:#ffffff;
	background-color: #000034;
	font-size: 1.2em;
text-decoration: underline;
background-image: url(../images/lft_roll.jpg); background-position:right;
image-width: 149px;
background-repeat: no-repeat;	
}

any help greatly appreciated! :)

no one got any advice?? :(

No link to your site for us to see

sorry :) http://bennzaks.co.uk

Try adding a z-index

http://www.w3schools.com/Css/pr_pos_z-index.asp

Kobra - firstly let me say thanks, i appreciate your input!

now i tried a z-index..

.sideBoxContent a:hover{
color:#ffffff;
	background-color: #000034;
	font-size: 1.2em;
text-decoration: underline;
background-image: url(../images/lft_roll.jpg); background-position:absolute; z-index: 1;
image-width: 149px;
background-repeat: no-repeat;	
}

but now the image is only visible on a single item within the menu (and that item drops over 2 rows)..

any other thoughts?

cheers

Try taking out the position absolute and make the z-index 1000 if you want it over the text

again thanks for your continual support...still no luck tho :(

:censored:

Your css has not changed from using position absolute and a z-index of "1"

sorry Kobra, pasted the old code in

.sideBoxContent a:hover{
color:#ffffff;
	background-color: #000034;
	font-size: 1.2em;
	padding-left: 0.2em;
text-decoration: underline;
background-image: url(../images/lft_roll.jpg); z-index: 1000;
image-width: 149px;
background-repeat: no-repeat;	
}

i had done an upload with the new settings and it didnt work so reverted back, I have however reploaded the ones as advised so source should display your reccomendation.

Tell you what i think i owe you a beer after we get this one cracked!

Couple of things.

I think that the zindex is being applied to the text & not the roll-over background image

So you might try setting it to -1

For IE you will need to obatin and apply a file & code for csshover.htc

I am only seeing the rollover on one selection and thought that it was present on all before???

Yeah I have tried both 1 & -1 and also tried by removing the zindex out of the shorthand background-image to apply just to text to see if that had any effect but unfortunately nothing.

The rollover was working initially just in the wrong place. any attempts to fix this seem to result in the image dissapearing from all but the nationl/international product list....

all very confusing! :frusty:

I haven't investigated why this article predicates a gif and not a jpg but have a read

http://alistapart.com/stories/rollovers/

tried as a gif ... same issues.. think i need a :smoke:

lol .. what should be a simple task eh??