Confirmation email layout oddity

When I view a confirmatin email using Outlook it looks OK. When I print it, or view in print-preview the layout is mashed - see attched screen grabs.
It appears that the top part of the table expands to fill the page width, but the bottom part doesnt. This leaves the outline box incomplete and an odd line through the costs.

Is this an outlook oddity - or perhaps a CSS problem?

Anyone any ideas?

I used 'view source' to look at the email source code. I dumped this code into my html editor.
I run Tidy - which reported a missing 'tr'
(it also reports a missing 'title' in the 'head' section, and does not like the use of the deprecated 'nobr' structure )

<div class="order-detail-area">
   <table border="0" width="100%" cellspacing="0" cellpadding="2">
   		<td class="order-totals-text" align="right" width="100%"> </td> 
   		<td class="order-totals-num" align="right" nowrap="nowrap">---------</td> 
   	</tr>
   <tr>
   	<td class="order-totals-text" align="right" width="100%">Sub-Total:</td> 
   	<td class="order-totals-num" align="right" nowrap="nowrap">£5.25</td>
   </tr>
   <tr>
   	<td class="order-totals-text" align="right" width="100%">Free Shipping:</td> 
   	<td class="order-totals-num" align="right" nowrap="nowrap">£0.00</td>
   </tr>
   <tr>
   	<td class="order-totals-text" align="right" width="100%">On-Line Booking Fee Refund:</td> 
   	<td class="order-totals-num" align="right" nowrap="nowrap">-£0.25</td>
   </tr>
   <tr>
   	<td class="order-totals-text" align="right" width="100%">Total:</td> 
   	<td class="order-totals-num" align="right" nowrap="nowrap">£5.00</td>
   </tr>
   <tr> 
   </table>
</div>

the 'tr' is clearly missing at the immediately after 'table' - and then present immediately before '/table'

so the string $PRODUCTS_DETAIL is malformed

Now to find where that is generated - but have to go out for a while first

OK - found it - I think

In classes/orders.php line 972

$html_ot .= '<td class="order-totals-text" align="right" width="100%">' . ' ' . '</td> ' . "\n" . '<td class="order-totals-num" align="right" nowrap="nowrap">' . '---------' .'</td> </tr>' . "\n" . '<tr>';

This is the first line - there is no opening 'tr', it is not part of the loop so cannot rely on the 'tr' added at the end of each loop line.

The loop is also a problem - line 975 is the loop line

      $html_ot .= '<td class="order-totals-text" align="right" width="100%">' . $order_totals[$i]['title'] . '</td> ' . "\n" . '<td class="order-totals-num" align="right" nowrap="nowrap">' .($order_totals[$i]['text']) .'</td> </tr>' . "\n" . '<tr>';

This has an opening 'tr' at the end - ready for thenext line
however - on the last line this leaves the 'tr' without a closing 'tr' before the '/table'

I would change both of these 2 lines to be complete and closed 'tr' '/tr'. ie open the 'tr' at the beginning of the line and close it '/tr' at the end of the line - I'll just give it a try

AHH - :( -
well the 'tr' structure is now correct - but the print layout is still bad.:(:ohmy:

the email html served still will not validate - no doctype, no title, 'nobr' deprecated - however thats unlikely to be the layou problem

how about changing

<nobr>........</nobr>

to

<span style="white-space:nowrap;">....</span>

at least that is standards compliant

tsrplatelayer:

how about changing

<nobr>........</nobr>

> to
> ```
<span style="white-space:nowrap;">....</span>

at least that is standards compliant
Email isn't standards compliant. You must essentially code for CSS1, or maybe CSS2. It's mostly Microsoft apps that are the least compliant. Lotsa articles available online to confirm this.

tsrplatelayer:

OK - found it - I think

In classes/orders.php line 972

$html_ot .= '<td class="order-totals-text" align="right" width="100%">' . ' ' . '</td> ' . "\n" . '<td class="order-totals-num" align="right" nowrap="nowrap">' . '---------' .'</td> </tr>' . "\n" . '<tr>';

> This is the first line - there is no opening 'tr', it is not part of the loop so cannot rely on the 'tr' added at the end of each loop line.
> 
> The loop is also a problem - line 975 is the loop line
<http://www.zen-cart.com/forum/showthread.php?t=155023>

OK - so I didnt invent the wheel - someone got there before me -
:laugh:

Is this why the confirmation email still uses 'table' for layout - a deprecated practice?

However - Just because microsoft cannot get it correct doesn't mean this app should get it wrong.

I still have this strange layout oddity - it is probably another MS artifact - but as I dont have any other email prog I cant say

which is why I wondered if anyone else had seen this effect

tsrplatelayer:

Is this why the confirmation email still uses 'table' for layout - a deprecated practice?Yes. Unfortunately sometimes it's necessary to code for the lowest-common denominator.
tsrplatelayer:

However - Just because microsoft cannot get it correct doesn't mean this app should get it wrong.True. Feel free to change yours to be CSS5/HTML5 standards-compliant. You'll get a great warm fuzzy feeling. But your customers won't be able to read the emails.

Or, you could contact all the email-client vendors and get them to upgrade their HTML engines and force updates out to all their users ASAP. :blush:

I have just verified that the layout problem is indeed an Outlook issue.

By messing with the paper leftr/right margin settings (set to 2.3cm) in print-preview the display can be corrected and then prints correctly

Also selecting 'other actions' 'view in browser' (which - of course - doesnt offer any options - just opens IE) and then print preview also displays/prints correctly. So clearly its an Outlook HTML engine issue.

Dont suppose there's any point is a CSS for printing in the light of Dr Byte's comments.:(

probably not ... however, you might be able to force table column widths by fudging the html for those. Or if the <nobr> tags are causing "stretching", you could omit those and live with the unsightly wrapping that may follow.

Thanks or the suggestions - I'll play a bit more

re email client compatibility - if anyone's interested - I found this
http://www.campaignmonitor.com/css/

Seems Outlook 2007/2010 is a major step backward compared to Outlook 200/2003

not much I can do about it

According to the link (previous post) Outlook 2007/2010 doesn't support 'width':ohmy::(