XHTML/CSS: Why does Firefox mess up my horizontal tab menu?

Problem page

Stylesheet

Any idea how to make this work in Firefox? (It appears as if the right tab image is being pushed below the link, as if there weren't enough room for it within the anchor element.

Also, the reason that I'm using two tags is that I prefer using less image data to having neater code. If you have any suggestions for a better way, let me know.

Thanks, John

Answers:

You can try this markup:

<a href='http://www.antisit.com/articles'>
  <span class='left'></span>
  <span class='right'></span>
  Articles
</a>

Seems to work fine in Firefox with firebug although I haven't tried anywhere else. Unfortunately, order shouldn't matter but it does sometimes. :(

Answers: