Browse Header Problem

[gavinwebb]

I am managing through a custom CSS to change the background color, foreground color, weight etc. of the browse header.  However one thing I can't do is get rid of the underline on the sortable headers.  I know they are hyperlinks and so must change the sub class of "a" which I have done.  I know it's picking it up for a few reasons:
In the "a" sub class I set the font color to red and my sortable headers turn red while my non sortable headers stay black
When I inspect the element in Chrome I can see very clearly that there is a matched CSS rule setting the decoration to none

Yet it still remains underlined.

Here is my CSS:

.nt-browse-table th{
font-weight: normal;
font-size: 1em;
background-color: #B9C7E9;
}
.nt-browse-table a{
text-decoration: none;
color: red;
}

[Bruce]

Hi Gavin,

I agree, I don't know why the override doesn't seem to work in this case.

However, since the underline is being added by a class called
nt-fakeget, I added the following to the custom file style to suppress it;

.nt-fakeget {
text-decoration: none;
}

Cheers
Bruce

[gavinwebb]

Thanks Bruce, that worked.  I have another similar problem.  I want the header text in the Browse to be centred.  The non-sortable headers again centre fine, but the sortable\hyperlinked ones don't.  I tried the same trick as above but with no joy.  Any ideas?
.nt-browse-table th{
font-weight: normal;
font-size: 1em;
background-color: #B9C7E9;
height:20px;
vertical-align: middle;
text-align: center;
}
.nt-fakeget {
text-decoration: none;
text-align: center;
}

[Bruce]

If you look at the HTML for the header, you'll see something like this;

<th id="head_3">
  <div class="nt-left nt-fakeget" data-do="sh">
     <a title="Click here to sort by Forward Address" data-value="3">Forward To</a>
   </div>
</th>

As you can see the text ("Forward To") is inside an anchor tag (<a>) and the anchir tag is inside a <div> tag.
There's not a simple way to center the div inside the cell, so the only thing you can do is make the div "bigger" and center the text inside the div. That's accomplished by adding ' nt-center nt-width-100' to the Div.

But there's a problem. Other stuff can appear in the header as well - for example the sorting arrow (up or down) or in the case of say Secwin a lock icon in the last column. Other stuff as well is likely to appear here in the future. Setting nt-width-100 causes the div to take the whole width, which in turn makes the icon appear on a separate line, so the header gets ugly.

For "reasonably, but not hugely" large columns something like
 ' nt-center nt-width-80'
can make it pseudo-centered. But that is somewhat less-convincing when the icon isn't there.

Now it's probably possible, using the position attribute, coupled with left and right settings to do something useful here, but so far I haven't found it yet.

cheers
Bruce