background color switch on button problem

Hi.. i have a small problem that i am struggling to resolve

i am using a png images with transparency for button rollovers with the background colors changing on hover etc..check it out here...(doesnt work in interent explorer 6 yet)

http://www.matthewmoore.me.uk/testsite/

i have checked all conceivable borders/margins etc that there could be on "a img" or "a" tags, but the background color change for hover comes in 3 pixels too low...seems like on all browsers

anybody got any ideas..and help is much appreciated..

Matt

Firstly, there aren't any "buttons" on your page at all, you have links; buttons are used in forms.
Here is some general advice. You are using images for text, this is usually a bad idea. For one, it doesn't help with SEO at all and it is far easier and faster to download using text.
Additionally you are using an orange strip image for the background, instead of this you could just change the background-color property to the same colour of orange to get the same effect.
To resolve that a bit of blue lies above the orange on rollover, you could try giving #navigation's padding property a zero value ( #navigation { padding: 0; } ) or adding some padding-top to your #navigation a's. I'm not too sure though as I haven't used CSS properly in months.
I have feeling this should work though:

Code: Select all

#navigation a
{
padding-top: 3px;
}

Good luck and nice design.

thanks for the advice...

padding-top 3px worked the "#navigation a" but still has 3 pixels beneath that i cant seem to get rid of...

ill work it out though, or just change the method a little... thanks