CSS issues (browser related)

I started work on a site afew days ago, and have ran into a couple issues related to CSS.

span.button {
    background-color:#890000;
    border:1px solid #000000;
    margin:auto;
}

span.button:hover, span.selected {
    background-color:#000000;
}

.inbutton {
    margin:3px 9px 3px 9px;
}

<span class="button" title="Come join our IRC server"><a href="irc://irc.syi.cc/syi" class="inbutton">IRC</a></span>

This is some code I have, which displays 1 "button" in my menu header. It should be dark red with a 1px black border, have a 9px margin either side, and change to black when hovered over.

This all works perfectly in firefox.

In Internet Explorer 6, I see no top or bottom border on the box, and it does not change colour when hovered over. Yet IE6 obviously supports :hover, since A:hover works? And I see no reason for the border to half work when it works fine on the rest of the page.

In Opera the span does not stretch across the full text, but seems to stop around halfway. The only explination for this I can guess at is that it is being positioned right by the .inbutton's margin, but it's length is being determined soley by the text length, rather than the margin and the text?

Ideally I would like a way to fix this without needing to write any messy script to altar code based on the browser (assuming thats possible?), so help would be much appreciated.