Images Not Displaying Properly in FireFox and IE

  • Resolved shepherdjim

    (@shepherdjim)


    9 years, 1 month ago

    I have set up 5 tables all displaying on a single page using the WP theme Weaver II. The table widths range from 2 to 4 columns. I have attempted to pre-calculate what size/dimensions would be best and have uploaded images with those dimensions (e.g. iimages intended for a 2 column table would be a maximum of 300 pixels wide while those going into a 4 column table would be 200 pixels wide).
    Here’s a link to my test page http://mainepracticalshooters.com/area-7-sponsors-2015/

    Only Chrome is correctly displaying the 4 column tables. In both Firefox (ver 36.0.3) and IE (ver 11) only the first half of the images in the 4th column are visible.
    1) How can I fix this?
    I can see that the images are being re-sized by WP, the Weaver II theme or by TablePress — not sure which is the culprit.
    2) Is there an optimal image size I should be uploading into the Media Gallery?

    3)Is there a way to control the image sizes displayed in the various tables. I ask because the images are the logos of companies donating merchandise and we would like to “size” the logos to relate to the size of the donations.

    BTW – TablePress is awesome and has made the job of inserting tables into my WordPress pages a pleasure instead of the drudgery I’d anticipated.

    Shepherd Jim

    https://wordpress.org/plugins/tablepress/

Viewing 1 replies (of 1 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    9 years, 1 month ago

    Hi Jim,

    thanks for your post, and sorry for the trouble.

    1) The reason for this basically is that Firefox uses slighly other rules when setting the widths of images in tables. For example, it deems using the desired width for the image higher than respecting the overall width for the table. Chrome in contrast wants the table to be fully visible here and therefore slightly shrinks the images (there’s a mismatch because the width of the table consists of the sum of the widths of the images and the padding (white space in the cells)).

    Therefore, the best approach to make everything fit here should be to reduce the padding (as your theme is setting a rather big one). For that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    #content .tablepress td {
	padding: 8px;
}

    2) The optimal size for the upload should be the size that you want the image to have (i.e. set the size as desired in your image manipulation program).

    3) The size of images is usually determined by the width and height values in the HTML code for the image (<img src="..." width="..." height="..." />) that you have in the cells.
    Beyond that, it’s usually possible to set the size of an image with some CSS code like

    .tablepress-id-123 .column-2 img {
  width: 100px;
}

    (with the table ID, column number, and width adjusted as desired).

    Regards,
    Tobias

Viewing 1 replies (of 1 total)
  • The topic ‘Images Not Displaying Properly in FireFox and IE’ is closed to new replies.