September 9, 200916 yr 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>
September 9, 200916 yr You shouldn't be using tables for content. <html> <head> <title>help</title> <style type="text/css"> body, html { margin:0; padding:0; width:100%; height:100%; } body { background:#fff; } #wrap { margin:0 auto; width:346px; padding:130px 0 0 0; } #imgFloat { width:196px; height:273px; float:left; } #textFloat { width:150px; height:273px; background:#e21a22; float:left; } #textFloat p { font-family:"Helvetica", Sans-Serif; font-size:13px; font-weight:normal; color:#fff; padding:10px 10px 0 10px; margin:0; } </style> </head> <body> <div id="wrap"> <div id="imgFloat"> <img src="test.png" alt="test" /> </div> <div id="textFloat"> <p>TEXT TEXT TEXT</p> </div> </div> </body> </html> That's how it should look. Just change 'test.png' to whatever your image is.
September 10, 200916 yr Author You shouldn't be using tables for content. snip That's how it should look. Just change 'test.png' to whatever your image is. Thanks for that Traxor. I was going with tables because the code was going into a email mailer, and I'm told older clients won't display right without a table structure.
September 10, 200916 yr Add margin-top: 0; to your p tag <p style="font-family: 'helvetica', sans-serif; font-size: 13px; font-weight: normal; color: #ffffff; padding-top: 10px; padding-left: 10px; padding-right: 10px; margin-top: 0;">TEXT TEXT </p> The p tag has a default top margin which was extending above the div and therefore pushing it down. Carry on using a table with inline styles if it's for a html email. The valign:middle; for the div style is irrelevant; I don't think it does anything and I'm not even sure it's a valid style for a div tag. In this page http://www.w3.org/TR/html4/index/attributes.html valign only has table elements as related elements.
Create an account or sign in to comment