WordPress.org

1. bcp
   Member
   Posted 10 months ago #

   Hello,

   I've been able to get my table (2 col, 4 rows) to work in firefox, but when I look at it in IE, the images for column one are smashed, very narrow. I found another post that referenced using a <p> before the images, but that did not make a difference.

   I found another post that referenced replacing
   <tr align="left" valign="middle">
   with
   <td style="text-align:center;vertical-align:middle;">
   which worked beautifully for the text, but not the images.
   I tried replacing "text" with "image", but that didn't do anything in IE.

   Any suggestions?
   Many thanks.

2. kmessinger
   Member
   Posted 10 months ago #

   Please post a url.

3. bcp
   Member
   Posted 10 months ago #

   Since it's in a private site, you won't be able to see it without log in info. Here is the table code from one of my test pages.

   <tbody>
   <tr align="center" valign="middle">
   <td style="image-align:center;vertical-align:middle;"><img class="aligncenter size-medium wp-image-415" title="NPBO Practice Startup System slides" src="http://npbostarterkit.com/program/wp-content/uploads/2011/07/ppt-title-holder-300x225.jpg" alt="" width="216" height="162" />
   <td style="text-align:center;vertical-align:middle;"><!--R1C2--><strong>Download the presentation as a PDF here.</strong></td>
   </tr>
   <tr align="left" valign="middle">
   <td style="text-align:center;vertical-align:middle;"><img class="alignleft size-full wp-image-420" title="NPBO checklist, templates, resources" src="http://npbostarterkit.com/program/wp-content/uploads/2011/07/clipboard.jpg" alt="" width="208" height="208" /></td>
   <td style="text-align:center;vertical-align:middle;"><!--R2C2--><strong>Download Checklist, Templates, Etc.</strong></td>
   </tr>
   <tr align="left" valign="middle">
   <td style="text-align:center;vertical-align:middle;"><img class="alignleft size-full wp-image-422" title="NPBO Audio MP3" src="http://npbostarterkit.com/program/wp-content/uploads/2011/07/audio.jpg" alt="" width="165" height="118" /></td>
   <td style="text-align:center;vertical-align:middle;"><!--R3C2--><strong>Download Audio:</strong></td>
   </tr>
   <tr align="left" valign="middle">
   <td style="text-align:center;vertical-align:middle;"><img class="alignleft size-full wp-image-419" title="notes" src="http://npbostarterkit.com/program/wp-content/uploads/2011/07/notes.jpg" alt="" width="206" height="206" /></td>
   <td style="text-align:center;vertical-align:middle;"><!--R4C2--><strong>Transcripts are in a PDF format.</strong> To save to your computer, right click on the link and "save as". You'll want to put it in your NPBO™ Startup Folder.
   Download here:</td>
   </tr>
   </tbody>
   </table>

4. kmessinger
   Member
   Posted 10 months ago #

   The code above was 2 row, 4 column.

   Here is code for 4 row, 2 columns tested in IE and FF.

   http://pastebin.com/w2wDzZgL

   Also tbody is not implemented completely in all browsers.

5. bcp
   Member
   Posted 10 months ago #

   Thank you for your help. I pasted the code into my test page and see no change. I am still having the same problem, where the images in column one are smashed/narrowed - in IE and not in FFox.

6. bcp
   Member
   Posted 10 months ago #

   If it matters, I am using the default wp theme, Twenty Ten 1.2

7. kmessinger
   Member
   Posted 10 months ago #

   The problem is in IE8. IE7 makes the images smaller but IE8 renders as you decribe. IE9 is fine.

   That is why it is better to use css than tables. (I have to learn this myself.) You could also use a conditional statement to force IE8 to IE7. You might also try 3 1 row, 2 column tables.

   [Edit] You might want to check out some plugins like this, http://wordpress.org/extend/plugins/easy-table-creator/

Reply

You must log in to post.