Rollover buttons breaking menu, not following display:inline

Good evening, sirs and madames.

I have horizontal rows of buttons on my site which are images. I’m using the following code to give the buttons a rollover effect. The problem is that when I insert this code, the buttons no longer stay in rows: they stack on top of each other vertically. I imagine the solution is fairly simple, but I’ve been unable to figure it out.

The problem can currently be seen at https://www.brawlinthefamily.com. The code is only inserted for the Archive button, as you can see. When inserted for the other buttons, the same issue occurs with them, and they stack up below the Archive button.

CSS:

a.rollover {
	display: block;
	width: 188px;
	height: 60px;
	text-decoration: none;
	background: url("https://www.brawlinthefamily.com/images/archive.jpg");
	}

a.rollover:hover {
	background-position: -188px 0;
	}

.displace {
	position: absolute;
	left: -5000px;
	}

HTML:
<a href="https://www.brawlinthefamily.com/?page_id=42" class="rollover" title="archive" rel="nofollow"><span class="displace">archive</span></a>

I’ve got the buttons following display:inline for the rest of them, but when the rollover’s inserted, it no longer conforms to this design.

If it helps to diagnose the issue, I previously got some assistance from stvwlf, who said the following:

“Your CSS has to be tweaked to position the buttons where you want them to be. If you want anyone to be able to help you with that you will have to post a URL. The issue can be debugged fairly simply with Firebug in the Firefox browser but that requires looking at the live site. “

At the time, I didn’t have the problem live on my site. However, I’ve now posted it live, so you can see the problem in action.

Thanks in advance for any assistance.