Feint Table Lines – How to remove

  • Resolved dorich

    (@dorich)


    13 years, 2 months ago

    I have two tables that show faint borders in spite of the application of CSS to remove the lines.

    The tables can be seen on this page.

    The original tables were created in Dreamweaver and tested on a live webpage and they presented correctly.
    I transferred the html and css into WP.

    For the most part the css is working as expected. However, I now have a faint outline to the cells.

    In an effort to remove the faint lines I added a rule to cell 1,1 of table 2.
    .noBorders {
    border-style: none;
    }

    However, the faint lines remain.

    Since my css rule is applied directly to the cell I would have expected it to take precedence over anything else that was effecting the cell. However, that appears to not be the case.

    Since the table originally presented correctly posted in a raw html page I’m assuming that WP is adding something and overriding my css rule.

    Any suggestions as to the source of the problem or how to get over it would be appreciated.

Viewing 9 replies - 1 through 9 (of 9 total)
  • esmi

    (@esmi)

    13 years, 2 months ago

    The theme’s CSS is adding a border on #content tr td. But Don’t edit the Twenty Ten theme! Your changes will be over-written the next time you upgrade WordPress or the theme. For this reason, it is recommended that you consider creating a child theme for your customisations.

    Muazam

    (@muazam)

    13 years, 2 months ago

    Do you want to remove all of it?
    When creating the table, do <TABLE BORDER=”0″>

    In css:

    table { border: 0;}

    esmi

    (@esmi)

    13 years, 2 months ago

    That won’t make any difference. The borders are being applied to the individual cells.

    Thread Starter dorich

    (@dorich)

    13 years, 2 months ago

    The theme’s CSS is adding a border on #content tr td. But Don’t edit the Twenty Ten theme! Your changes will be over-written the next time you upgrade WordPress or the theme. For this reason, it is recommended that you consider creating a child theme for your customisations.

    Thanks for your response

    The css with my additional rules is being loaded via a child theme, so i don’t touch the main theme.

    However, I’m guessing that my rule is being overwritten for some reason.

    Thread Starter dorich

    (@dorich)

    13 years, 2 months ago

    Do you want to remove all of it?
    When creating the table, do <TABLE BORDER=”0″>

    In css:

    table { border: 0;}

    Thanks for your response.

    I believe I’m doing what you suggested but just applying it to one cell instead of the whole table. However, if you see anything incorrect in my rule please let me know.

    Thanks.

    esmi

    (@esmi)

    13 years, 2 months ago

    Try adding:

    #content table, #content tr td {
    border: none
}

    to your child’s stylesheet.

    Thread Starter dorich

    (@dorich)

    13 years, 2 months ago

    That solved it thanks very much!!

    One more question if I may.

    I now need to add back custom borders and so I would guess that I should identify unique tables with an ID and then make the selector a combination of the table ID and whatever tags/selectors I need.

    For example #table1 .header

    Or is there a better/more elegant way to approach this.

    Thanks again.

    esmi

    (@esmi)

    13 years, 2 months ago

    If you want to style your tables differently – either now or in the future – then adding an unique id to each table is definitely the way to go.

    You can still style all tables globally using #content table or #content th etc via your child’s stylesheet. The trick is to prefix all of the table rules with #content in a child of Twenty Ten so that you over-ride the parent’s style.

    Thread Starter dorich

    (@dorich)

    13 years, 2 months ago

    @esmi

    Thanks, very much appreciated.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Feint Table Lines – How to remove’ is closed to new replies.