Push bottom aligned background image below text.

Question

I know this is a bit strange and believe me it's not the way I would have done it but I was given this project and now I have to live with it.

I have a table that is sortable on my page (created with DisplayTag libraries) and to indicate which column is being sorted a background image is assigned to the column header.

The problem I'm having is that the image is getting displayed over the text (or behind... can't really tell with black on black :\ ) Obviously this is to be expected since it's a background image instead of an actual image.

I was wondering if anyone knew of a way I could insure that the background image isn't displayed until after the text using css. I realize changing it would be the smarter route but at this point time is a factor and changing it would require too much work.

Any advice is appreciated!

Code:

Display tag table definition

<display:table name="results" class="displayTag" sort="list" export="true" pagesize="0" requestURI="queryReportResult.action">  
    <% for (int i=0; i < displayProperties.length; i++) { %>
      <display:column property="<%=displayProperties[i].getName()%>" title="<%=displayProperties[i].getDisplayName()%>" decorator="<%=displayProperties[i].getDecorator()%>" sortable="true" headerClass="sortable" />
    <% } %>
    <display:setProperty name="export.pdf" value="true"/>
    <display:setProperty name="export.xml" value="false"/>
    <display:setProperty name="export.pdf.filename" value="<%=report.getName() + \".pdf\"%>"/>
    <display:setProperty name="export.csv.filename" value="<%=report.getName() + \".csv\"%>"/>
    <display:setProperty name="export.excel.filename" value="<%=report.getName() + \".xls\"%>"/>      
  </display:table>

CSS definitions

table.displaytag a {        
    font-size: 10pt;
}

table.displaytag th {
    padding-left: 5px;
    padding-right: 15px;
    font-size: 10pt;
    border-bottom: 1px solid black;
}

table.displaytag th.sorted a,table.displaytag th.sortable th.sortable-right a {
    background-repeat: no-repeat;
    background-position: right;
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
}

table.displaytag th.order1 a {
    background-image: url(../images/down-arrow.png);
    background-position: bottom center;
}

table.displaytag th.order2 a {
    background-image: url(../images/up-arrow.png);
    background-position: bottom center;
}

And actual code from page

<th class="sortable">
<a href="queryReportResult.action?d-49653-s=4&amp;d-49653-o=2&amp;d-49653-p=1">This Info </a></th>
<th class="sortable sorted order1">
<a href="queryReportResult.action?d-49653-s=5&amp;d-49653-o=1&amp;d-49653-p=1">Other Info </a></th>

<th class="sortable">
<a href="queryReportResult.action?d-49653-s=6&amp;d-49653-o=2&amp;d-49653-p=1">Info </a></th>

As you can see when the column is sorted it gets the sorted and order1 classes, and the order1 is the class that adds the background image.

Answer 1

Assuming that the only text in the th is that contained within the a tags, can you not just specify a background-color for the a that would allow for its text to be visible?

th > a {
    color: #000;
    background-color: #fff;
    /* other css */
}

That way the background of the a is 'above' the background of the th.

Or am I missing something that's really obvious?

Answer 2

Well... here's how I fixed this one, thanks mostly to Google :D

I basically just aligned the background image to the bottom and then added a margin-bottom so that the text couldn't write all the way to the bottom.

Here's the code!

table.displaytag th.sorted a,table.displaytag th.sortable th.sortable-right a {
    background-repeat: no-repeat;
    background-position: right;
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
}

table.displaytag th.order1 a {
    background-image: url(../images/down-arrow.png);
    background-position: bottom center;
    margin-bottom:15px;
}

table.displaytag th.order2 a {
    background-image: url(../images/up-arrow.png);
    background-position: bottom center;
    margin-bottom:15px;
}