Question

I have a table, and when I click on one of the head columns the data gets sorted respectively. When clicked column gets an arrow before the column name (which is the line-style-image). When the column name is too long, and the column is clicked for sorting so it has image bullet, the images goes above the text, when the white-space: normal is set. This is what I expect. This is what happens in Chrome and IE, but is not the case in Firefox v11+. In Firefox the image arrow goes beyond the bounds of the <th> in front of the text. Any suggestion to make this work in Firefox like in Chrome and IE?

Here is a sample:
HTML

<table class="tableCustom" cellspacing="0" cellpadding="0" border="0">
    <thead>
        <tr>
            <th class="tableValue sorting_asc">
                <ul>
                    <li>Some unnecesseary long Column Name</li>
                </ul>
            </th>
        </tr>
    </thead>
</table>

​
CSS

th.tableValue {
    background-color: #8DA7BE;
}

th, th.tableValue {
    background-position: center top;
    background-repeat: repeat-x;
    border: 1px solid #8DA7BD;
    color: #FFFFFF;
    font-size: 9pt;
    height: 33px;
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
    white-space: normal;
}

.tableValue {
    color: #728DAB;
    text-align: center;
    white-space: normal;
    width: 100px;
}

.sorting_asc {
    list-style-image: url("../img/sort-asc.gif");
    list-style-position: inside;
    list-style-type: inherit;
}

​

Answer 1

Are you using any reset.css ?? If not .

Here you can find many links for the reset.css.

If problem still persists, please provide a jsFiddle

Edit::: Reason for using reset.css is because it will make all user-agent(browser) css to a base settings, so that they don’t look different in different browsers.