I think you do not need a span around the text of the outputText. You can
add a div in the header with float:right that contains the sort image. Here
is dom snapshot of out table header:
.xq6 { DISPLAY: inline-block; BACKGROUND-IMAGE:
url(/faces-trunk/afr/sort_des_n.png); WIDTH: 14px; CURSOR: default;
BACKGROUND-REPEAT: no-repeat; HEIGHT: 14px; TEXT-DECORATION: none}
.xq5 { DISPLAY: inline-block; BACKGROUND-IMAGE:
url(/faces-trunk/afr/sort_asc_n.png); WIDTH: 14px; CURSOR: default;
BACKGROUND-REPEAT: no-repeat; HEIGHT: 14px; TEXT-DECORATION: none}
<TH><DIV style="FLOAT: right; POSITION: relative"><TABLE class="xqo"
id="demoTemplate:table:j_id___jsp_tag_ctru20::afrSI" style="DISPLAY: none"
cellSpacing="0" cellPadding="0" summary="" border="0"><TBODY><TR><TD
_afrSortAsc="1"><A class="xq5" title="Sort Ascending"></A></TD><TD
_afrSortDesc="1"><A class="xq6" title="Sort
Descending"></A></TD></TR></TBODY></TABLE></DIV>Name</TH>
On 9/6/07, Andrew Robinson <[EMAIL PROTECTED]> wrote:
>
> Any suggestions on the best way to get the sort icon to dock on the
> right with the text left-aligned?
>
> using float:right on the link is hard to get working cross-browser as
> floating right tends to mess up line wrapping especially in IE.
>
> I got it somewhat working with putting a span around the text:
>
> <tr:column sortable="true" sortProperty="name">
> <f:facet name="header">
> <tr:outputText styleClass="sortHeader" value="Name" />
> </f:facet>
> #{var.name}
> </tr:column>
> And using:
>
> SPAN.sortHeader {
> display: block;
> width: 100%;
> float: left;
> }
>
> It worked in FF 2, but not a pretty solution. Any tips on a better idea?
>
