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

Question

Problem page: http://www.antisit.com

Stylesheet: http://www.antisit.com/styles.css

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

Answer 1

You can try this markup:

<a href="http://www.antisit.com/articles"&gt;
  <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. :(

Answer 2

Thanks, Jorge; that worked!