alignment screwed up

  • i’m customizing a template for WordPress with the following code:

    <div class="showcase" style="height:380px;">
 <div class="abr-container" style="height:380px;">
    <div class="grid_12" style="height:380px;">
      <table width="100%" border="0" height="380px">
         <tr>
           <td width="5%">&nbsp;</td>
           <td width="30%" style="background-color:#666666; padding: 20px 20px 20px 20px; margin-right: 10px;">
             <p style="color:white">Brentwood Town Centre</p>
             <p style="color:white;">Lougheed Highway and Willingdon, Burnaby<br />
               On the corner by childrens play area and Sears.
             </p>
             <p style="color:white">(604) 298-1880</p>
             <p style="color:white">Diamonds, rings, charms, earrings, sterling silver and more!</p>
             <p style="color:white">In-store workshop-repairs wile you waite</p>
           </td>
          <td width="60%"><?php echo do_shortcode('[uds-billboard name="homepage"]');?></td>
            <td width="5%">&nbsp;</td>
         </tr>
      </table>
  </div>
</div>

    And the following happens, https://rodanjewellers.ca/Capture.PNG

    The grey box along with the text should be lined up with the purple (380px high), if the php snippet is removed it aligns fine…

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

  • I suspect that it is due to the alignment of the table or text in the css for the site, but without a link to the site where the problem can be seen, I can’t be more specific.

    Thread Starter adtuent

    (@adtuent)

    here is a link to the site:

    https://rodanjewellers.ca/?skip-maintenance-token=57945E

    Add ‘vertical-align: top’ to the style for the cell and adjust the top padding:

    <td width="30%" style="background-color:#666666; padding: 64px 20px 20px 20px; margin-right: 10px; vertical-align: top;">

    Thread Starter adtuent

    (@adtuent)

    great that worked, although there is still a little overlap…

    It turns out that all cells need the vertical-align property. Add an id of ‘hdr-table’ to the table:

    <table id="hdr-table" width="100%" border="0" height="380px">

    and add this to the end of style.css:

    table#hdr-table td { vertical-align: top !important; }

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘alignment screwed up’ is closed to new replies.