fractions

[elearnster]

I need to enter fractions and was successful with the following html for the fraction 15/25.    "¹⁵⁄₂₅";

Then I changed css to have have the grid appear with a charcoal background with white text to make it consistant with the other tables in the program.  I used the following css:

      div.pq-grid * {
            color: #FAF0E6;
            background-color: #666666;
            font-weight:bold;
            font-style:normal;
            font-family: "Arial";
            line-height:18px;
            text-shadow:none;
        }

Now the fractions no longer appear correct.  The numerator and denominator are white text a black background (file attached). All the other entries in the grid appear correctly.

One way to solve my problem is to apply the css changes to the the 'th' records, but that does not seem to work.  Do you have any suggestions on how to get the fractions to appear correctly?
eLearnster

[paramvir]

Could you please replicate your issue in this jsfiddle.

http://jsfiddle.net/b6b710mz/19/

[elearnster]

It was helpful to look at the example.  My program displays differently because I have included:

    <!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../inc/pqgrid/themes/office/pqgrid.css" />   

The code in the office theme that affects the display differently is:
tr.pq-grid-row > td{
    background:#fff;
    color:#333;
}

I like this theme since it only changes the color and background in the the header.  Unfortunately, it appears to apply a reverse video on the numerator and denominator of the fractions.  Is there css code to only effect the header (th records)?  Or could I turn off the reverse video?

[elearnster]

Good news.  The following css code generates the desired display I am looking for.  If the see anything improper, please advise.

        div.pq-grid * {
            font-weight:bold;
            font-style:normal;
            font-family: "Arial";
            line-height:18px;
            text-shadow:none;
        }

        div.pq-grid * > tr {
            color: #FFFFFF;
            background-color: #666666;
        }

        tr.pq-grid-row > td {
            color: #666666;
       background-color: #FFFFFF;
        }