Odd CSS positioning error in FireFox and IE

Question

For some reason, I have some problem with my CSS positioning on a social networking sharing tray on my site..

The even odder aspect of the problem is that it's only showing up in IE and FF..

I've tried playing with the CSS properties in FireBugg, but to no avail.

The link is here: http://www.marioplanet.com/index.asp

The look in FF and IE makes the icons look all jumbled, while in Safari and Chrome, you can see that they are all lined up properly.

Could anyone help explain this odd phenomenon?

Answer 1

Try add this rule, it's image border when I view it in FF.

a.trayIcon img { border: 0px; }

Answer 2

I changed line 85 in default.css:

#facebookicon, #youtubeicon  {
    margin-left: 22.5px;
}

to

#facebookicon, #youtubeicon  {
    margin-left: 17px;
}

and it looks like chrome.