Image in table displayed as very small icons in Chrome and IE

  • Resolved Decimus

    (@decimus)


    11 years ago

    Hi Tobias

    Having a problem post transition from WP-Table Reloaded to TablePress, where I made some edits in a now TablePress table
    see: https://www.emmanuel.org.hk/emmanuel-people/

    Using head-n-shoulder images in a directory table. The head-n-shoulder images were originally set up for the table and are 60x80px.

    It all used to work. Not sure if this is a browser issue or TablePress issue?

    Head-n-shoulder images show up in Firefox, however, in Chrome and IE they show up as very small icons. On a phone browser (Chrome) they show up as empty boxes. With Chrome and IE when page loads initially you see the large image, then once page load the images disappear and you get either very small icons or blank icons

    —
    Code within worddpress page

    [table id=1 column_widths=”10%|40%|10%|40%” /]

    Emmanuel Committee
    [table id=2 cellspacing=”0″ column_widths=”10%|40%|10%|40%” /]

    [ note I removed the cellspace in in the first table to see if that impacted it ]

    Example code in TablePress table
    —
    col a1
    <img src=”https://www.emmanuel.org.hk/wp-content/uploads/2012/05/ecp_fr_nigel_gibson.png&#8221; alt=”Fr. Nigel Gibson (Emmanuel Church – Pokfulam, Priest in Charge)” title=”Fr. Nigel Gibson (Emmanuel Church – Pokfulam, Priest in Charge)” width=”60″ height=”80″ class=”alignleft size-full wp-image-4528″ />

    col b1
    Fr. Nigel Gibson
    <b>Priest in Charge</b>
    9226 5988 (mob)
    2523 4157 (Cathedral)

    col c1
    <img src=”https://www.emmanuel.org.hk/wp-content/uploads/2014/03/Fr_RobertMartin_AssociatePriest.jpg&#8221; alt=”Fr. Robert Martin Associate Priest Emmanuel Church, Pokfulam” width=”60″ height=”80″ class=”alignleft size-full wp-image-5405″ />

    col d1
    Fr. Robert Martin
    <b>Associate Priest </b>
    2523 4157 (Cathedral)
    —

    Many thanks

    https://www.ads-software.com/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.

    Your theme seems to be adding some CSS to the images in tables. To fix this, please try adding this to the “Custom CSS” textarea on the “Plugin Options” screen:

    #content .tablepress img {
    margin: 0;
    padding: 0;
    max-width: none;
    width: auto;
}

    Regards,
    Tobias

    Thread Starter Decimus

    (@decimus)

    Hi Tobias

    Yes that worked. When I went into he “Custom CSS” textarea on the “Plugin Options” screen: there was already some CSS in there. Probably came over with the update????

    .tablepress-id-1,
    .tablepress-id-1 td,
    .tablepress-id-1 th {
    border: none !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    }

    .tablepress-id-2,
    .tablepress-id-2 td,
    .tablepress-id-2 th {
    border: none !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    }

    thanks all solved

    Peter

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Yes, the CSS that you already have there comes from the migration, so you basically already had that when using WP-Table Reloaded.

    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 ‘Image in table displayed as very small icons in Chrome and IE’ is closed to new replies.