Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

Alignment problem

  • 09-09-2009 05: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