Hi guys I've got a problem!

I'm using a jquery navigation bar - you can see what I've got so far at the top right of this page here - http://www.jamiewebster.co.uk/v2/index.html

Basically the code uses the following bit of CSS on the LI:

Code:

ul.gelbuttonmenu li.active{
position:absolute;
width:0px;
background:url(/v2/images/gelbuttonleft.png) top left no-repeat, url(/v2/images/gelbuttonright.png) top right no-repeat, url(/v2/images/gelbuttoncenter.png) top center repeat-x;
}

So as you can see I am using different images for each part of the button, ie. the left corners, the right corners, and the centre. The problem is that the images are transparent, and are overlapping each other. I can't seem to position the corners so that they aren't overlapping.

I've tried background-position and off-setting the corners by -5px, but it just pushes the corners outside the Li and makes them disappear.

Any ideas, I'm totally stumped!

can you SS the issue? the 'button' looks fine in FF and chrome... in IE there is not sliding button (but links are clickable)

yeah you might not be able to tell by the naked eye, so ill zoom in. This is what its supposed to look like (in my PSD i created):
[You must be registered and logged in to see this image.]

and this is what it looks like in FF and chrome (ignore the font styling):

[You must be registered and logged in to see this image.]

the corners are 5px in width, and as you can see they're positioned INSIDE the centre image, whereas they should be positioned OUTSIDE so you don't get that overlap

i am pretty sure it is because you are repeating it along the x axis... just because you set top center does not mean it will repeat to the tips of the left and right... the CSS will constantly re-write itself based on what came last (cascading)... now i do not know if multiple declarations of bg images are allowed (although it seems to be working) this may be why you are not seeing it in IE... that all aside... I would suggest (if you are going to keep this method) making your top center image the exact width you require and placing it in there (so if your total width is 20px, 5 each for the sides you image would be 10px wide)... I personally think that making a single background image with no repeat and the exact dimensions would be better though