2012-10-25 15 views
11

मैंने एक बहुत ही सरल HTML ईमेल बनाया है। http://staging.xhtml-lab.com/mailtest/केंद्र outlook.com में ईमेल संरेखित

यह सब ईमेल क्लाइंट में ठीक काम कर रहा है, hotmail.com/outlook.com

हॉटमेल ईमेल में छोड़कर गठबंधन छोड़ दिया जाता है, यह केंद्र गठबंधन रहना चाहिए।

मैंने ईमेलोलॉजी.org द्वारा सुझाए गए अनुसार निम्नलिखित कोड जोड़े हैं, लेकिन इसका कोई प्रभाव नहीं है।

<style type=“text/css”> 
/**This is to overwrite Hotmail’s Embedded CSS************/ 
table {border-collapse:separate;} 
a, a:link, a:visited {text-decoration: none; color: #00788a} 
a:hover {text-decoration: underline;} 
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important} 
p {margin-bottom: 0} 
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%} 
/**This is to center your email in Hotmail************/ 
.ExternalClass {width: 100%;} 
</style> 

ईमेल केंद्र को गठबंधन करने के लिए मैं और क्या कर सकता हूं इसके लिए कोई सुझाव?

+0

समस्या '

' हो सकती है। मुझे यकीन है कि अगर यह सभी ईमेल क्लाइंट्स द्वारा समर्थित है, और एमएस आउटलुक/हॉटमेल को उनके समर्थन के बारे में विशेष रूप से पसंद किया जाता है। यह पृष्ठ मदद कर सकता है: http://www.campaignmonitor.com/css/ – kburns

उत्तर

2

यहां एक ऐसा है जिसे मैंने अपने सभी ईमेल के शुरुआती बिंदु के रूप में उपयोग किया है। यह सभी प्रमुख ईमेल क्लाइंट पर 100% काम करता है:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title></head> 
<body style="margin: 0px; padding: 0px background-color: #FFFFFF;" bgcolor="#FFFFFF"><!-- << bg color for forwarding (leave white) // main bg color >> --><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td> 
<!-- CENTER FLOAT WIDTH --> 
<table width="600" border="0" valign="top" align="center" cellpadding="0" cellspacing="0"><tr><td><!-- Master Width of the center panel --> 
preheader... 
<!-- CENTER PANEL BG COLOR (to hide separation of tables on email forward from Outlook (known issue) --> 
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"><tr><td><!-- Master Color of the center panel --> 

content... 

<!-- /CENTER BG COLOR --> 
</td></tr></table> 

<!-- /CENTER FLOAT WIDTH --> 
</td></tr></table> 
<!-- /CENTER FLOAT --> 
</td></tr></table></body></html> 

यह है एक जब कोई (वे, सफेद पर टाइप कर सकते हैं, जबकि एचटीएमएल तैयार किया गया भाग के लिए पृष्ठभूमि रंग का रहता है) पर ईमेल अग्रेषित के लिए सफेद पृष्ठभूमि में बनाया गया। इसके अलावा मुख्य पैनल एक बीजीकलर के साथ सेट होता है क्योंकि Outlook अग्रेषित होने पर तालिकाओं के बीच अंतराल रखता है।

उम्मीद है कि मदद करता है।

+1

जिसने वास्तव में मुझे बहुत धन्यवाद दिया! आउटलुक ऑफिस 365 और आउटलुक 2010 के बीच केंद्र में ईमेल प्राप्त नहीं हो सका ... आपके पास वही टैग थे लेकिन जाहिर है कि आपका आदेश किसी भी तरह से अलग है, सही है और सभी ग्राहकों में एक ईमेल को केन्द्रित करने के लिए काम करता है। धन्यवाद! – mike

+0

बुरी खबरों को सहन करने से नफरत है, लेकिन सभी ईमेल क्लाइंट पर कुछ भी 100% काम नहीं करता है। – Goose

+0

@Goose। यह सभी प्रमुख ग्राहकों के लिए करता है। मैंने जवाब में "प्रमुख" जोड़ा, क्योंकि बहुत कम ज्ञात ग्राहक सेवाएं हैं जैसे कि लिटमस परीक्षण नहीं करते हैं। – John

27

यह आपको एक केंद्रित ई-मेल देना चाहिए:

<table style="width: 100%; background: red;"> 
    <tr> 
    <td> 
     <center> 
     <table style="width: 640px; background: blue; margin: 0 auto; text-align: left;"> 
      <tr> 
      <td> 
       Your content here 
      </td> 
      </tr> 
     </table> 
     </center> 
    </td> 
    </tr> 
</table> 

center -tag क्या आउटलुक और outlook.com के लिए आवश्यक है है। अन्य ग्राहक margin विशेषता का उपयोग करते हैं। कुछ ग्राहकों में, पाठ center -tag के बाद केंद्रित होता है, और इसलिए text-align विशेषता आवश्यक है।

आप चौड़ाई स्क्रीन आकार के आधार पर चर होना चाहते हैं, तो निम्न कोड का उपयोग करें:

<table style="width: 100%; background: red;"> 
    <tr> 
    <td> 
     <center> 
     <!--[if mso]> 
     <table style="width: 640px;"><tr><td> 
     <![endif]--> 
     <div style="max-width: 800px; margin: 0 auto;"> 
      <table style="background: blue; text-align: left;"> 
      <tr> 
       <td> 
       Your content here 
       </td> 
      </tr> 
      </table> 
     </div> 
     </center> 
     <!--[if mso]> 
     </td></tr></table> 
     <![endif]--> 
    </td> 
    </tr> 
</table> 

आउटलुक max-width का समर्थन नहीं करता है, और इसलिए आकार Outlook के लिए 640px करने के लिए तय हो गई है। अन्य सभी ग्राहकों के लिए, ई-मेल की चौड़ाई दृश्य विंडो की तरह ही होगी, लेकिन अधिकतम 800px।

कृपया मुझे बताएं कि क्या आपको कोई क्लाइंट मिल गया है जहां ये समाधान काम नहीं करते हैं, ताकि हम एक ऐसा समाधान ढूंढ सकें जो जितना संभव हो उतने ग्राहकों के साथ काम करता है।

+1

बहुत उपयोगी @magnarmyrtveit धन्यवाद! –

+1

'

' टैग ने स्वयं ही हॉटमेल/आउटलुक समस्या हल की। –

संबंधित मुद्दे