Dear LazyWeb, fix my CSS.

The little "RSS" and "iCal" boxes on the DNA Lounge site look good in Firefox but are messed up in Safari:

<LJ-CUT text=" --More--(10%) ">

The top pair appears on the calendar pages, and the bottom pair appear on the top-level page. The CSS for those boxes is this:

.xml_button {
  color: #FFF;
  background: #F60;
  text-decoration: none;
  padding: 0 0.5em 0 0.5em;
  border: 2px outset #F60;
}
.xml_button:hover { background: #F90; }
.xml_button:active { border-style: inset; }

In case it's not obvious, the problem that I want to fix is that the inner margin ("padding") between the text and the beveled edges of the box is all wrong in Safari. Note that it's wrong in two different ways: it's less bad (but still wrong) in the top right box, because that page has an extra &nbsp; there. Without the &nbsp;, both the top and bottom padding vanishes. With the &nbsp;, only the bottom padding vanishes.

These screen shots are from the latest Safari and Firefox running on OSX, but Linux Firefox behaves the same as Mac Firefox.

How do I make Safari behave like Firefox?

What does MSIE do?

Note:

• Hard-coding pixel heights anywhere is the wrong answer.
• Yes, I know I could just put the orange box in an image like everyone else does.
• Yes, I know that I use <TABLE> and <FONT> all over the place.
• Yes, I know you don't like it.
• Yes, I know I could do all that with CSS.
• Yes, I know that would mean I'd get into heaven.

Update: apparently having FONT and B inside the styled A was what was making Safari render differently from Firefox. Thanks rsdio and vample!