6

I have scoured through all my CSS files (and there are a lot of them) in addition to looking at/removing the sDom settings for my jquery Datatables plug in but for some reason, the sort icon (up and down arrows) next to my text is place below the text as if an html
was somehow input.

Has anybody ever had this happen before?

2
  • 1
    Have you tried inspecting the table header cells with Firebug or other web dev toolkit? In most of them you can enable/disable styles one by one for the specific DOM element until you find the one that's causing it.
    – jevakallio
    Mar 7, 2011 at 18:42
  • @fencliff - i have not, was not aware you could do so
    – JM4
    Mar 7, 2011 at 18:43

3 Answers 3

5

this is how I solved this

.css_right
{
    /* adding this keeps the sort icon on the same level as the label */
    float:right;
}

The icon already has this class, but for some reason it doesn't have the style(s) to correclty display

0

I find the Firebug extension for Firefox to be invaluable when debugging CSS issues.

You can disable and modify the CSS styles on your page "live". Really takes the guesswork out of the style inheritance mess that can otherwise be night impossible to solve.

Image from the Firebug website at http://getfirebug.com/css.

2
  • thanks for the suggestion. Interestingly, the entire page malfunctions (only in Firefox). It works without any issue in IE, Chrome, and Safari. I am now more lost than I was before.
    – JM4
    Mar 7, 2011 at 18:57
  • no luck. if I delete every piece of css (and i mean every) with the exception of the google cdn .css file, the issue still exists.
    – JM4
    Mar 7, 2011 at 21:02
0

the answer was right in front of me but apparently you have to apply the 'display' class to all table elements for the script to properly function. I had spent hours upon hours looking through CSS on this but nothing came back. I hope my time can help save somebody else a new wall.

3
  • 5
    Sorry I don't really understand what you mean, could give me a little code snippet to fix this? Apr 19, 2012 at 12:42
  • Can you please provide more description on this. I am having same issue here.
    – user1413
    Jan 30, 2017 at 17:43
  • @peipst9lker @user1413 - he means to place display in your table class like so <table class="display other-class" id="dataTable">` as can be seen here. Everyone should be using dev tools in their browsers to test css before implementing (when possible) to avoid spending valuable time reloading pages in order to view the effects Dec 12, 2017 at 16:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.