strange IE8 css issue

Question

I have a header row which has this structure:

<th...
  <a...
   <span...
     {text}

If you look at the attachement, you will notice that all the headers with this structure are aligned.

Well, when a specific header is clicked for "sorted" status, the structure will be like:

<th...
  <a...
   <span...
     <table>
        <tbody>
           <tr>
              <td>
                {text}
              </td>
              <td>
                 <div> //with a background image
              </td>
           </tr>
        </tbody>
     </table>

Well, in IE8 this sorted column is no longer aligned (see the screenshot please).

I've tried a lot to put some css style (position:relative, etc) to the table inside the span to fix the alignment in IE8 but I failed..

Is here any css guru which can suggest a fix?

Please note that I can NOT change this structure (its some generated code from ICEfaces library) but I can apply css attributes (if I know where...).

Also, there is no css difference (some specific important style) to the sorted column applied. Just plain table inside that span.

Thanks.

Answer 1

Check the vertical-align property, maybe. Here, judging by the screencap, it seems to be in default mode, 'baseline'. (I'm not sure it will do much, though)

Try : th.stuff { vertical-align:top; } or : th.stuff { vertical-align:middle; }

Also you could make all th slightly higher and gain somme padding to align the content. I think the problem, overall; commes from the select that appears in the th, inside the table.

Answer 2

You can use IE specific style sheets. They are known as conditional style sheets.

http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/

The idea of course would be to change the CSS for that element for IE only (because it does work already with other browsers).