I'm not sure of why it's not working when you have put the preheader text in the ESP - which ESP is it?
Does the preheader text have to be defined in the ESP? If you can get away with it being in the template, this is how I do mine (and I have no issues with this):
I add this code within the <style> tag, at the top of the email, and outside of any media query:
I then add the actual markup inside the table when starting to build the email:
<!-- START Invisible Preheader -->
<td align="center" class="invisible-preheader" style="font-size:0px; width:0px; height:0px; display:none; color:#e8e8e8; line-height:0px;">
<span class="invisible-preheader" style="font-size:0px; width:0px; height:0px; display:none; color:#e8e8e8; line-height:0px;">
INVISIBLE PREHEADER TO GO HERE
<!-- END Invisible Preheader -->
I've used this for over 6 years and never had an issue this way :)
On quickly skipping through your code, the first thing I would try is adding a pixel width within the style attribute, for example:
<table align="center" border="0" cellpadding="0" cellspacing="0"
width="336" style="max-width:336px; width:336px;" class="max-width">
From my experience, when I set both of these, the width is respected! Hope that helps :)
Is this in the Litmus test, or on a live test of Outlook 2007? I thought they worked - just tested again and the bulletpoint is working for me. I'm using this code:
I usually fix this by making sure there's enough content in the preheader. I usually stick to a minimum 30 word policy on that - never had an issue :)
Are you able to post a screenshot somehow of what the issue looks like?
It sounds familiar to an issue I had recently with little gaps appearing. I found that adding the below line of code to the table directly surrounding the problem area fixed it.
border-spacing:0; mso-line-height-rule: exactly; mso-margin-bottom-alt:0; mso-margin-top-alt:0; mso-table-lspace:0pt; mso-table-rspace:0pt;