Hi there I seem to be having great difficulty isolating these xml driven tables from the generic tables and tds in the CSS. I don't want the generic styles to have any affect at all on the xml tables so I have created some styles for the xml tables but they still do not seem to style correctly. Can someone please assist? Here are the styles I am trying to use for isolation: (and this is just the beginning)

.dxgvControl table {

border:none;

}

.dxgvHeader td {

line-height: 0;
font-size: 1.5em;
font-weight: bold;

}

.dxgvTable {

border:none;

}

And here is the website address: http://www.diamondharbour.net.nz/clubs-and-societies.aspx and here is the address for the CSS handler that combines all the css files: http://www.diamondharbour.net.nz/Data/Sites/1/skins/dhw/csshandler.ashx?skin=dhw%27

I was also wondering how I would get the right tds to show up their border right. Everything else now seems to be working fine - thanks so much.

  • Indent all your CSS definitions by 4 spaces so all will be visible as code. Robert Koritnik about 7 years ago

4 answers

2
points

Your css selectors are incorrect for the way you've written the html

if you have

<td class="dxgvHeader">

then your css would be:

td.dxgvHeader {
    line-height: 0;
    font-size: 1.5em;
    font-weight: bold;
}

or

.dxgvHeader {
    line-height: 0;
    font-size: 1.5em;
    font-weight: bold;
}

the selector in your question targets td's contained inside elements with class dxgvHeader

altering the css so it correctly targets the elements will resolve your issue, but you may need more specificity to over-ride other applied styles.

e.g some styles are applied by the class .ClubsGrid on the containing table, so you may need to use this selector:

 table.ClubsGrid td.dxgvHeader {
        line-height: 0;
        font-size: 1.5em;
        font-weight: bold;
    }
Answered about 7 years ago by Tony Crockford
0
points

Great that helped. So here is the revised CSS. I am wondering how I best control the borders of each td. I'd prefer to put a generic border on the parent td .clubsgrid but the way the table tds have been set up there are a few ugly extra cells. Any ideas?

.dxgvTable {

border:1px solid #ddd;
font-family: arial, verdana, sans-serif;

}

.ClubsGrid td.dxgvHeader {

    line-height: 0;
    font-size: 1em;
    font-weight: bold;

}

.ClubsGrid td {

/*this is the parent td of the clubs and societies table*/
line-height: 1.4em;
font-size: .9em;
border: 0;
border-bottom: 1px solid #ddd;

}

/the below widths add up to 720px. The page width is 820px/ .ClubsGrid td.td1.dxgv {

width: 150px;

}

.ClubsGrid td.td2.dxgv {

width: 240px;

}

.ClubsGrid td.td3.dxgv {

width: 180px;

}

.ClubsGrid td.td4.dxgv {

width: 150px;

}

Answered about 7 years ago by Felicia
0
points

you could add

.ClubsGrid {empty-cells: hide; }

which should remove borders and backgrounds from empty cells.

Answered about 7 years ago by Tony Crockford
0
points

thanks Tony. The last suggestion didn't seem to work but I will work on it some more. I appreciate your efforts. :-)

Answered about 7 years ago by Felicia
  • oops! well spotted, edited original. Tony Crockford about 7 years ago