Placing icon next to positioned headers

[nofel]

hey folks,
i have a design and i am using the paul’s fixed header technique. and i added sort JS on it, its working all good but i need to place arrows next to heading i tried to place img tag next to it. it work fine until i have a one line heading. but there is two line heading (i have to break the heading down coz i had problem allocating th’s specific width’s)

        <div class="fuel-result">
            <div class="fuel-scroll">  
 <table class="fuel" width="100%" >
  
  <thead>
 
  <tr  bgcolor="#f2f7fb">
            <th><p>January<br /> Month&nbsp;<img src="../images/sorter.png" border="0" /></p></th>
            <th><p>Feburary<br /> Month.&nbsp;<img src="../images/sorter.png" border="0" /></p></th>
            <th><p>March<br /> Month&nbsp;<img src="../images/sorter.png" border="0" /></p></th>
             <th><p>April<br /> Month&nbsp;<img src="../images/sorter.png" border="0" /></p></th>           
           <th><p>May <br />Month&nbsp;<img src="../images/sorter.png" border="0" /></p></th>
           <th><p>June<br /> Month&nbsp;<img src="../images/sorter.png" border="0" /></p></th>
            <th><p>July<br /> Month&nbsp;<img src="../images/sorter.png" border="0" /></p></th>
            <th><p>August<br /> Month&nbsp;<img src="../images/sorter.png" border="0" /></p></th>
            <th><p>Septemeber&nbsp;<img src="../images/sorter.png" border="0" /></p></th>
            <th><p>October&nbsp;<img src="../images/sorter.png" border="0" /></p></th>
            
   </tr>
   
   </thead>
      <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>        
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr> 
</tbody>
</table>

table.fuel{width:1020px; overflow-x:hidden;}
table.fuel td{border:1px solid #09C;padding:2px; text-align:center;}
table.fuel thead p{position:absolute; top:5px; margin-left:25px; cursor:pointer;}
table.fuel th tr{background-color:#f2f7fb;}
div.fuel-result{width:1020;height:278px;position:relative;padding-top:40px;}
div.fuel-scroll{width:100%; height:275px; overflow-x:hidden; overflow:auto;}

i must also add here that as elements are positioned, i can’t get a perfect center for my th’s. is there any workaround?
thanks in advance

[PaulOB]

You’ll want padding-right not padding-top if you want to place the image in the background at the right. Use the background-position to move the image down if needed.

.fuel th p{background:url(../images/sorter.png) no-repeat 100% 4px;padding-right:10px}

[nofel]

@Stomme those are little arrow facing opposite direction to tell user its sortable.
@paul, the first option is good as i have many otheer pages and it will be wise to include that n css so it reflect in all the pages. however when i do padding-top:the images stays there n text movies. which is opposite of what i want. is there a workaround?

[nofel]

i m seeing this first time 100% 4px for the background is it same as margin:4px 4px;

[PaulOB]

@emaarkhan

i m seeing this first time 100% 4px for the background is it same as margin:4px 4px;

Not quite

The first co-ordinate is the horizontal measurement and 100% means place it on the right as far as it will go.(It actually means place the point that is at the 100% position of the image and place it at the 100% position of the element.)

The second co-ordinate is the vertical mesurement and 4px will place it 4px from the top.

[nofel]

it ruins my positioned elements

[PaulOB]

As Stomme said you could apply the arrow as background image but it might not align correctly.

th p{background:url(../images/sorter.png) no-repeat 100% 0;padding-right:10px}

Or if you need an image in the html to click then move the image to the start of the line and float it left.

e.g.

.fuel th img{float:right;margin:0 0 10px 10px}

<th><p><img src="../images/sorter.png" border="0" />January<br />
Month</p></th>

You can’t really center the text automatically due to the way the fixed header is constructed which is why I originally recommended leaving it left aligned.

The only other alternative would be to use a full javascript fixed header version as there are some about.

[Stomme_poes]

Can these be background images instead? Esp since the lack of alt text makes me think this is a sort of decoration and not telling users anything important. Just saying the table is sortable?

[prajapati]

Try segregating the text and the image inside the <th> put it in another table or div and then center them.

<th><table><tr><td align="center">January</td></tr><tr><td align="center">Month&nbsp;<img src="../images/sorter.png" border="0" /></td></tr></table></th>

Check if it works.