Alignment problem

Discussion in 'Web Design and Development' started by irishgrizzly, Sep 9, 2009.

  1. irishgrizzly macrumors 65816

    irishgrizzly

    Joined:
    May 15, 2006
    #1
    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>
     

    Attached Files:

  2. Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #2
    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.
     
  3. irishgrizzly thread starter macrumors 65816

    irishgrizzly

    Joined:
    May 15, 2006
    #3
    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>
     

Share This Page