Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Alignment problem

  • 09-09-2009 5:20pm
    #1
    grizzly
    Registered Users, Registered Users 2 Posts: 2,789 ✭✭✭


    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.
    </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>


Comments

  • #2
    Goodshape
    Registered Users, Registered Users 2 Posts: 8,488 ✭✭✭Goodshape


    Is there a reason you're using tables for the layout? (mail rendering issues maybe?)

    If not, how about this? 
    <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>

    Looks OK to me.


  • #3
    grizzly
    Registered Users, Registered Users 2 Posts: 2,789 ✭✭✭grizzly


    Thanks you very much!

    Yeah table cause less trouble for some email clients – which are in the dark ages of HTML.


Advertisement