Layout of table data changes after publishing

  • Resolved cek510

    (@cek510)


    7 years, 8 months ago

    [ Moderator note: moved to Fixing WordPress. Please do not use Developing with WordPress for these topics. ]

    I have a table of two columns, with text in the left column and an image in the right column. I intend for the image to be centered vertically and horizontally in the cell. The table appears as I intend in the WP editor, but when I publish the table has extra vertical space in each row, with the left hand text aligned with the bottom of the cell and the right hand image aligned with the top.

    Here’s the view in the editor:
    Table data in WP editor

    Here’s the view when published:
    Table data after publishing

    When I comment out the image, the published view reverts to the intended (i.e. no extra vertical space.) Setting valign in the left cell has no effect. Any suggestions will be appreciated.

    The page is here:
    https://www.newcotorg.cot.education/peer-reviewers/

    I’m using the Spacious theme from ThemeGrill
    Plugins: Akismet Anti-Spam, Hello Dolly, Jetpack, Media Library Assistant, Use Any Font, WP Super Cache, WP Forms Lite.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter cek510

    (@cek510)

    Oops. Forgot the code:

    `<table style=”width: 695px;” border=”0″ cellspacing=”0″ cellpadding=”0″>
    <tbody>
    <tr>
    <td width=”525″>
    <h1>About Our Peer Reviewers</h1>
    </td>
    <td></td>
    </tr>
    <tr>
    <td colspan=”2″ width=”521″><span style=”font-size: 12pt;”>Ignore this row.</span></td>
    </tr>
    <tr>
    <td colspan=”2″></td>
    </tr>
    <tr>
    <td width=”521″ valign=”center”>Name, Title
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis elementum est, in ultrices diam. Curabitur suscipit massa non ultricies posuere. Donec ut diam semper, suscipit odio ut, euismod turpis. In sit amet accumsan ex.</td>
    <td width=”174″></td>
    </tr>

    Thread Starter cek510

    (@cek510)

    Further information from testing:
    Behavior is as noted in Chrome and Firefox.
    In both IE and Edge, the extra vertical space disappears (good) but the image is vertically aligned at the top of the cell (intended to be vertically centered.)

    Thread Starter cek510

    (@cek510)

    After trying the most common CSS solutions from the web-experts, nothing seemed to work across multiple browsers. I managed to eliminate the extra vertical space by deleting the “display: block; margin: auto;” from the <style> clause, but that left the images left-justified. In the end, I padded my images out to the desired 174 pixels. This gave reasonable results on all browsers plus mobile. The images are centered horizontally but at the top of the cell vertically (I wanted them to be centered vertically.) Not an ideal solution, but good enough.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Layout of table data changes after publishing’ is closed to new replies.