Table header elements styling issues

neburton

Hi,

I'm having a problem with consistancy of the TH elements in THEAD. I'm using JQuery UI and the arrows don't want to align with the text. It seems to affect IE and FF but not Chrome.

Please see the problem at:

http://i54.tinypic.com/2vt5ic4.png

I've noticed that if I remove the text for the OrderID and Subtotal, the problem goes away. Maybe because the title is longer than the contents below in these columns.

Any advice would be appreciated.

UPEngineer

use firebug and look at the html generated.

You may need to adjust the padding a bit on the sort_wrapper class or adjust your column width on those two columns a bit. Not enough space to accomadate it so it is flowing and wrapping.

Hope this helps!

neburton

Thanks, I'll take a look at that.

I'd love to use Firebug, but for some reason it conflicts with datatables or JQuery JSON and causes a load of datatable JSON errors

It used to work, so I'm not sure what changed in my code to cause this problem.

neburton

I'm taking about Firebug Lite under IE.

UPEngineer

Oh, I use firebug under firefox. Never had much luck with IE firebug lite

allan

If you are using DataTales 1.7.3 (possibly 1.7.2 - can't quite remember....) you can do something like this:

[code]
table.display thead th div.DataTables_sort_wrapper {
position: relative;
padding-right: 20px;
padding-right: 20px;
}

table.display thead th div.DataTables_sort_wrapper span {
position: absolute;
top: 50%;
margin-top: -8px;
right: 0;
}
[/code]
Allan