Hi all - hope someone can help,

 

I'm working on a new design for my website (literally started a couple of hours ago!), and I've run into a problem which, although is not the end of the world, I would like to solve.

 

Basically, if you have a look at my site here, you can see the nav on the right side has a solid background rollover. I would prefer that the background is tight around the word (and NOT cut off tales on letters). Currently there is a couple of pixels between the word and the white-background rollover, which I don't want.

 

Here is what I'm trying to achieve:

 

 

Is this even possible?? I can of course get around this by going back to image/css rollovers, but would prefer not to do this.

 

Any help greatly appreciated

 

James

Edited June 2, 201115 yr by wickywills

Try removing the padding from the <li>

UL { margin:8px 0 8px 0;}
LI { list-style:disc; margin:0 0 5px 15px;}

Try removing the padding from the <li>

UL { margin:8px 0 8px 0;}
LI { list-style:disc; margin:0 0 5px 15px;}

 

I already have, further down in my CSS (nav ul li) - still no joy

I'm just Reading this on my phone so can't check your code, but you would do this by using padding/margins on your li tags and setting padding:0; on li a and of course using the background colors on li a & li a:hover

Edited June 2, 201115 yr by Blofeld

Try playing with a line-height CSS value for the link tag, eg line-height: 0.99;

 

You may get varying results in different browsers but worth a try.

If line-height doesn't do the trick, you could see if negative padding/margins does the trick. To be honest, I don't really think the effect is a good idea, screws with legibility.