Alignment problem

irishgrizzly · Sep 9, 2009

I'm having a nightmare as to why I can't get these to align against the top (image and red box). On Safari it's good, but in firefox theres a 16 pixel gap above the reb text box. Is there something in the code preventing it being flush with the image? Or something I can include? I've sending a email with HTML, so that's why the CSS is all inline.

Code:

</head>

<body>
                          <table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                  <td valign="top"  width="196">
                          <p><img src="/test1.jpg" alt="test" width="196" height="273"></p>
                          </td>
                                      <td><div style="width: 150px; height: 273px; valign: middle; background-color: #e21a22; top: 0px;">
            <p style="font-family: 'helvetica', sans-serif; font-size: 13px; font-weight: normal; color: #ffffff; padding-top: 10px; padding-left: 10px; padding-right: 10px;">TEXT TEXT </p>
                                      </div></td>
                              </tr>
                           </table>
</body>
</html>

Dunmail · Sep 9, 2009

First thing - valign isn't a CSS property, use vertical-align.

Your alignment problem is due to the <p> tag, but I'm not sure why it should affect its parent container.

irishgrizzly · Sep 9, 2009

Yeah, I'd thought that the <p> tag might have been the problem.

Here is the code I ended up with;

Code:

<div style="width : 346px; overflow : hidden;">
    <img style="float : left;" src="/test1.jpg" alt="test" width="196" height="273" />
    <div style="float : left; width: 150px; height: 273px; valign: middle; background-color: #e21a22; top: 0px;">
        <p style="font-family: 'helvetica', sans-serif; font-size: 13px; font-weight: normal; color: #ffffff; padding-top: 0px; padding-left: 10px; padding-right: 10px;">TEXT TEXT </p>
    </div>
</div>

Search

Search

Alignment problem

irishgrizzly

macrumors 65816

Attachments

Dunmail

macrumors regular

irishgrizzly

macrumors 65816

Our Staff