White lines in Outlook 2007 html email

HTML & CSS
1

Hi folks,

see screenshot here: http://bit.ly/fSPl3A

and code that relates to that area below:

<table width="100%" border="0" cellspacing="0" cellpadding="0">             
									<td valign="top" width="335"><img style="display:block" src="http://www.test.com/tangled/images/logo.jpg" width="335" height="241" alt="Disney Tangled"></td>

										<tr>
											<td valign="top" width="335">
												<table width="100%" border="0" cellspacing="0" cellpadding="0">
													<tr>
														<td valign="top" width="72" style="font-size:1px; line-height:1px;"><img style="display:block" src="http://www.test.com/tangled/images/text-mid-lt.jpg" width="72" height="318" alt=""></td>
														<td valign="top" width="241" style="background:#00597e">
                                            				<table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                  				<tr>
																	<td valign="top" style=" font-size:11px; line-height:15px; font-weight:bold; font-family:Verdana, Geneva, sans-serif; text-align:center; color:#fff; padding:15px 0 0 0;">lorem impsum dolar set omoar</td>

                                                  				</tr>
                                                  				<tr>
																	<td valign="top" style="font-size:11px; line-height:15px; font-weight:normal; font-family:Verdana, Geneva, sans-serif; text-align:center; color:#fff;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td>
																</tr>
															</table>
														</td>
														<td valign="top" width="22" style="font-size:1px; line-height:1px;"><img style="display:block" src="http://www.test.com/tangled/images/text-mid-rt.jpg" width="22" height="318" alt=""></td>
													</tr>

												</table>
											</td>
										</tr>
										<tr>
                                        	<td valign="top" style="font-size:1px; line-height:1px;"><img style="display:block" src="http://www.test.com/tangled/images/text-bottom.jpg" width="335" height="50" alt=""></td>
                                       	</tr>
                             		</table>

I’ve tested in Hotmail, Gmail and Outlook Express and it’s perfect, this is the only issue left and I’m not sure what else I can try to fix it!

Any help would be much appreciated, cheers :slight_smile:

2

It’s not easy to relate that code to the image, but on first look, it seems your HTML is a bit messed up:

<table>
  [COLOR="Red"]<td></td>
  <tr> [/COLOR] 
    <td>
      <table>
        <tr>
          <td></td>

May not relate to the problem, but good too keep things consistent: row within table, cell within row.

I’d also suggest setting a pixel width on the <table> elements themselves, rather that width=“100%”.

3

I was going to suggest using style=“display:block” but it appears you are already using this…