• Resolved highcoastmedia

    (@highcoastmedia)


    Hi,

    Thanks for a great plugin.

    I have just recently applied some CSS to my tables at http://www.slotssons.com

    Both at the top of the page and if you scroll, a little bit further down on the page.

    The issue here seems to be related to rendering issues, firefox vs chrome and safari.

    Everything looks amazing on chrome and safari, but quite bad on firefox. How can i fix that? Here is the custom CSS i uses for my tables :

    .tablepress td {
    background: #FAFAFA; /* for non-css3 browsers */
    background-image: -moz-linear-gradient(top,#FAFAFA 50%,#E1E1E1 100%);
    background-image: -webkit-linear-gradient(top,#FAFAFA 50%,#E1E1E1 100%);
    -webkit-box-shadow: rgba(0,0,0,0.4) 0 1px 2px;
    -moz-box-shadow: rgba(0,0,0,0.4) 0 1px 2px;
    box-shadow: rgba(0,0,0,0.4) 0 1px 2px;
    }

    .tablepress-id-2 tbody td {
    font-size: 13px;
    color: #ff0000;
    }

    .tablepress-id-3 tbody td {
    font-size: 10px;
    color: #ff0000;
    }

    @media (max-width: 979px) {

    .tablepress-id-2 .column-2,
    .tablepress-id-2 .column-3 {
    display: none;
    }

    }

    .tablepress-id-2 .column-2,
    .tablepress-id-2 .column-3,
    .tablepress-id-2 .column-4 {
    vertical-align: middle;
    text-align: center;
    }

    .tablepress-id-3 .column-1,
    .tablepress-id-3 .column-2,
    .tablepress-id-3 .column-3,
    .tablepress-id-3 .column-4 {
    vertical-align: middle;
    text-align: center;
    }

    .tablepress tbody tr:first-child td:first-child {
    border-top-left-radius: 20px;
    }

    .tablepress tbody tr:first-child th:last-child {
    border-top-right-radius: 20px;
    }

    .tablepress tbody tr:last-child td:first-child {
    border-bottom-left-radius: 20px;
    }

    .tablepress tbody tr:last-child td:last-child {
    border-bottom-right-radius: 20px;
    }

    .tablepress-id-2,
    .tablepress-id-2 tr,
    .tablepress-id-2 tbody td,
    .tablepress-id-2 thead th,
    .tablepress-id-2 tfoot th {
    border: none;
    }

    .tablepress-id-3,
    .tablepress-id-3 tr,
    .tablepress-id-3 tbody td,
    .tablepress-id-3 thead th,
    .tablepress-id-3 tfoot th {
    border: none;
    }

    .tablepress-id-3 .column-4 {
    width: 100px;
    }

    Support on this would be grateful.

    Thanks in advance, and thanks for a great plugin.

    https://ww.wp.xz.cn/plugins/tablepress/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Can you please try adding

    .tablepress {
      border-collapse: separate;
    }

    to your “Custom CSS”? That might already have an effect.

    Additionally, in

    .tablepress tbody tr:first-child th:last-child {

    please change the th to a td.

    Regards,
    Tobias

    Thread Starter highcoastmedia

    (@highcoastmedia)

    Thanks for the quick reply and awesome help! Where is the donate button?

    Looks very good now!

    Once again, thank you so much.

    Keep up the good work!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!
    Donations are greatly appreciated, please see https://tablepress.org/donate/

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘CSS Rendering different firefox vs chrome & safari’ is closed to new replies.