PDA

View Full Version : Alignment problem



irishgrizzly
Sep 9, 2009, 12:15 PM
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>


Dunmail
Sep 9, 2009, 01:38 PM
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 10, 2009, 01:12 AM
Yeah, I'd thought that the <p> tag might have been the problem.

Here is the code I ended up with;

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