FF showing weird underline...

[Classerv]

I have a page with sortable cols in a table...no problems there but the column headers that you click on to sort up or down are supposed to be underlined then when you click on them a small arrow appears next to the column heading that you are sorting. The text is underlined in IE and the arrow isn't when it appears (how it should be) but in FF the text is underlined and the underline expands out with nothing next to it - like a space was put there and when you click to sort the column the arrow is underlined. I have 2 .css files so I can load the right one either for IE or FF . Here is the code that applies to both and you can see that the arrow clearly says text deco. None...so why is the arrow showing up text deco. underlined in FF and how can I fix it??

Thanks in advance
Amy

/* Sortable tables */

table.sortable a.sortheader {
color: #ffffff;
FONT-FAMILY: arial,verdana,helvetica,sans-serif;
FONT-SIZE: 8pt;
FONT-WEIGHT: bold;
text-decoration: underline;
}

table.sortable span.sortarrow {
color: white;
text-decoration: none;
}

[ray326]

Is the arrow inside the anchor?

[Classerv]

Well, here is the line in the .js file that contains the arrow...

Amy

cell.innerHTML = '<a href="#" class="sortheader" onclick="ts_resortTable(this);return false;">'+txt+'<span class="sortarrow">&nbsp;&nbsp;&nbsp;</span></a>';

[ray326]

<a href="#" class="sortheader" onclick="ts_resortTable(this);return false;">'+txt+'</a><span class="sortarrow">&nbsp;&nbsp;&nbsp;</span>