Rollover buttons are spazzing out!

[brianatlarge]

Website: http://studentseatfree.com/brian/

As you can see, when you mouse over the rollover button, it flashes on and off. Using firebug I can see that the <a> element is not the same size as the image. I’ve tried to remedy this by setting the font-size for the <a> element to the same height as the image, but this didn’t work.

Thoughts?

HTML:

Code:

CSS:

Code:

* { margin: 0; padding: 0; }

#content {margin:0 auto; width:1000px;}
#topbar {background-image: url(images/top_green.jpg); background-repeat:repeat-x; min-height:74px; height:74px;}

#logo {float:left; display:inline;}
#leaderboard {margin-top:25px;}

/*Navigation Bar*/

#navbar {background-image: url(images/navbar.jpg) ; background-repeat:no-repeat; min-height:32px; height:34px; width:767px;}

#exclusive_button {width:166px; height:34px; min-height:34px; display:inline;}
#exclusive_button:hover {visibility:hidden;}

#regular_button {width:156px; height:34px; min-height:34px; display:inline; position:relative; left:30px;}
#regular_button:hover {visibility:hidden;}

#advertise_button {width:107px; height:34px; min-height:34px; display:inline; position:relative; left:45px;}
#advertise_button:hover {visibility:hidden;}

#contact_button {width:128px; height:34px; min-height:34px; display:inline; position:relative; left:56px;}
#contact_button:hover {visibility:hidden;}

/*End Navigation Bar*/

img {border:0}

Thanks!

[Author]

Posts