I am trying to make a custom html newsletter for campaign monitor. Table width is 600px. I have 3 columns of images with text. Each column has a 200px width and 192px height. But when I see it in outlook 2007, I found those columns/images height are greater than 192px. I want the columns/images height to be 192px. How to solve this?
Note: Please don't run your head on classes. I have used the classes in media queries and I have no problem with it. The problem I am facing in outlook 2007(tested in outlook 2007). I need working code from you.
<table width="600" class="hp" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200" height="192" class="mob-column" background="https://i.imgur.com/sNVCXJg.jpg" align="left" style="width:200px; height:192px; background-image:url('https://i.imgur.com/sNVCXJg.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;" bgcolor="#000080">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:150pt; height:144pt;">
<v:fill type="frame" src="https://i.imgur.com/sNVCXJg.jpg" color="#000080"/>
<v:textbox style="mso-fit-shape-to-text:true;" inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="padding:42px 20px 32px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:15.43px; text-transform:uppercase; line-height:23.145px; text-align:center; color:#ffffff;" class="fallback-text-r">
<font face="'Roboto', Arial">Chicken</font>
</td>
</tr>
<tr>
<td style="padding:0px 20px 0px 20px; color:#cac8c6; font-family:'Montserrat', Arial; font-weight:900; font-size:10.29px; line-height:15.435px; text-align:center; color:#ffffff;" class="fallback-text-m">
<font face="'Montserrat', Arial">From</font>
</td>
</tr>
<tr>
<td style="padding:0px 20px 42px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:25.89px; line-height:38.835px; text-align:center; color:#ffffff;" class="fallback-text-r">
<font face="'Roboto', Arial">$10.99</font>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<td width="200" height="192" class="mob-column" background="https://i.imgur.com/DAQXLs7.jpg" align="left" style="width:200px; height:192px; background-image:url('https://i.imgur.com/DAQXLs7.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;" bgcolor="#000080">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:150pt; height:144pt;">
<v:fill type="frame" src="https://i.imgur.com/DAQXLs7.jpg" color="#000080"/>
<v:textbox style="mso-fit-shape-to-text:true;" inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="padding:42px 20px 32px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:15.43px; text-transform:uppercase; line-height:23.145px; text-align:center; color:#ffffff;" class="fallback-text-r">
<font face="'Roboto', Arial">Fish</font>
</td>
</tr>
<tr>
<td style="padding:0px 20px 0px 20px; color:#cac8c6; font-family:'Montserrat', Arial; font-weight:900; font-size:10.29px; line-height:15.435px; text-align:center; color:#ffffff;" class="fallback-text-m">
<font face="'Montserrat', Arial">From</font>
</td>
</tr>
<tr>
<td style="padding:0px 20px 42px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:25.89px; line-height:38.835px; text-align:center; color:#ffffff;" class="fallback-text-r">
<font face="'Roboto', Arial">$10.99</font>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<td width="200" height="192" class="mob-column" background="https://i.imgur.com/s9isrA4.jpg" align="left" style="width:200px; height:192px; background-image:url('https://i.imgur.com/s9isrA4.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;" bgcolor="#000080">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:150pt; height:144pt;">
<v:fill type="frame" src="https://i.imgur.com/s9isrA4.jpg" color="#000080"/>
<v:textbox style="mso-fit-shape-to-text:true;" inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="padding:42px 20px 32px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:15.43px; text-transform:uppercase; line-height:23.145px; text-align:center; color:#ffffff;" class="fallback-text-r">
<font face="'Roboto', Arial">Noddles</font>
</td>
</tr>
<tr>
<td style="padding:0px 20px 0px 20px; color:#cac8c6; font-family:'Montserrat', Arial; font-weight:900; font-size:10.29px; line-height:15.435px; text-align:center; color:#ffffff;" class="fallback-text-m">
<font face="'Montserrat', Arial">From</font>
</td>
</tr>
<tr>
<td style="padding:0px 20px 42px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:25.89px; line-height:38.835px; text-align:center; color:#ffffff;" class="fallback-text-r">
<font face="'Roboto', Arial">$10.99</font>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>Screenshot of outlook 2007
Screenshot of what I want
