2011-08-17 18 views
8

Sto inviando un messaggio HTML da Outlook al mio account mail.live.com. Quando visualizzo i risultati in mail.live.com utilizzando Firefox, l'e-mail sembra ok, ma quando uso IE tutto il contenuto è centrato.Testo di rendering e-mail HTML centrato in IE

Ho aggiunto un sacco di align=left e CSS in linea style='text-align:left' per controllarlo ma non fa alcuna differenza.

Quando carico il file HTML direttamente in IE va bene; solo quando si guarda dal mio account Live/Hotmail è distorto.

Qualcuno ha avuto questo problema?

<html> 
<body style='background:#333;font-family:arial;text-align:left;'> 

     <style> 

      #BlueStripe { 

       color:#000000; 
       background:#113399; 
       width:800px; 
       height:35px; 

      } 


      #Content { 
       width:800px; 

      } 
      #LeftContentPanel { 
       border:none; 

       padding:20px; 
       padding-top:5px; 
      } 

      #LeftContentPanel h1, h2, h3 { 
       color:#113399; 
       font-family:Arial,Verdana; 
       font-weight:normal; 
       margin-bottom:5px; 

      } 
      #LeftContentPanel p { 
       margin-top:5px; 
      } 

      h1, h2 { 
       font-weight:normal; 
       font-size:22px; 
       padding-bottom:0px; 

      } 
      #RightContentPanel { 

       width:220px; 
       padding:10px; 

       margin-top:10px; 
       margin-right:30px; 

       color:#fff; 

       font-weight:normal; 

      } 
      #RightContentPanel h1, h2 { 
       font-weight:normal; 
       font-size:20px; 
       margin-top:5px; 
       margin-bottom:-5px; 

      } 

      #RightContentPanel p { 
       font-weight:normal; 
       font-size:14px; 

      } 



      .edition { 
       text-align:left; 
       font-family:Arial,Verdana; 
       font-weight:normal; 
       font-size:16px; 
       color:#113399; 
       margin-left:10px; 
       margin-top:15px; 

      } 

      #FooterText { 
       color:#113399; 
       font-size:12px; 
      } 

      p { 
       text-align:left; 

      } 


    </style> 


     <table border='0' Id='PageWidth' Style='border:0px;width:800px;background:#fff;text-align:left;' cellpadding=0 cellspacing=0 align='center'> 
      <tr> 
       <td> 
        <table border='0' Style='border:0px;width:800px;' cellpadding=0 cellspacing=0 align='left'> 

         <tr Id='BlueStripe' Width='800'> 
          <td ColSpan='3'></td> 
         </tr> 


         <!-- Header --> 
         <tr id='LogoTitle' align='Left'> 
          <!-- Col 1/2 --> <td align='left'> 
                <img src='logo.jpg' alt='club logo' /> 
               </td> <!-- Col 1 --> 
          <!-- Col 2/2 --> <td class='Panel2' ColSpan='2'> 
                <br /> 
                <img src='title.jpg' alt='club news' /> 
                <br /> 
                <br /> 
                <p class='edition' align='left'>Edition 9 – September 2011</p></td> <!-- Col 2 --> 
         </tr> 
         <!-- Banner Image - Dumb Bells --> 
         <tr Id='BannerImage' Style='width:800px;'> 
          <!-- Col 1/1 --> 
          <td ColSpan='3' Width='800px' Style='width:800px;text-align:left;' CellSpacing='0' CellPadding='0' align='Left'> 
           <img src='banner.jpg' alt='Dumb Bells' Width='800px' /> 


          </td> <!-- Col 1 --> 
         </tr> 
         <tr Id='Content' align='Left'> 
          <!-- Col 1/1 --> 
          <td ColSpan='3'> 
           <br /> 
           <table id='ContentPanel' Style='margin-top:10px'> 
            <tr align='Left'> 
             <td align='Left'> 
              <table id='' Style='border:0;text-align:left' align='left'> 
               <tr> 
                <td Id='LeftContentPanel' Width='460'> 
                 <h1>Insert heading here</h1> 
                 <p> 
                  Vellant enes mo volupition eati amenima ximpor andis es mil mi, 
                  optate cum in niatqui dellabo. Turiti quos debis demolen dustis 
                  que peditat iorione quidignimin non con eaquatia nullore perit, 
                  totat incimol orrum, coriassequo quia aut eos unt quia dolent 
                  estemquodio odionseque esed que dolupta sperror sit quia que 
                  pa dipsape llore, nitiis audi de nonse nisqui quia velit estem rem 
                  quam rerum autem voluptiae atur? 
                 </p> 
                 <h1>Insert heading here</h1> 
                 <p> 
                  Feremos quisinte siment. Cium volorpo ressit re, omnisci as 
                  autent as moluptas nonsece atquaessit eum dolut aut quis 
                  nobisto quat aborem quis antempore, id moluptatur, sa que et 
                  ea ium apis delignisi te si aut poribus ullaudae od quia conem 
                  se verepud itatemporum ulparum re, volut velis eatis es accum 
                  aut ratur, vende ius si doloriorum ent qui que velesciat que nam, 
                  alitem ati a non remperorest restrum volentintem voluptatur am 
                  rem eumqui quat et ea quiame quat. 
                 </p> 
                 <p> 
                  Occatem poreium in rehentio eat el earia iur am, et laborio. 
                  Itatur? Quiae estiorecese conseque niet estem as etusciur mos 
                  ipsapid que videbit audit quid ut volupta sperias sequate ctotat 
                  et et voluptis dellest, simus, secus aute quis iliquis si quia simus. 
                 </p> 

                 <div id='FooterText'> 
                  more text here 
                 </div> 

                </td> 
               </tr> 
              </table> 

             </td> 
             <td Width=5></td> 
             <td valign='top' align='left' style='padding:15px;text-align:left'> 
              <table Id='RightContentPanel' Style='text-align:left;' > 
               <tr style='padding:15px;text-align:left'> 






                <td style='margin-top:0px;padding:5px;padding:15px;text-align:left;padding-top:5px; background-color:#113399;'> 
                  <h1>Insert header here</h1> 
                  <p align='left' style='text-align:left'> 
                   Vellant enes mo volupition eati 
                   amenima ximpor andis es mil 
                   mi, optate cum in niatqui de 
                   llabo. Turiti quos debis demo 
                   len dustis que peditat iorione 
                   quidignimin non con eaquatia 
                   nullore perit, totat incimol or 
                   rum, coriassequo quia aut eos 
                   unt quia dolent estemquodio. 
                  </p> 
                </td> 
               </tr> 
               <tr> 
                <td height='35'> 
                </td> 
               </tr> 
               <tr> 

                <td Style='margin-top:30px;padding-top:5px;padding:5px;padding:15px;text-align:left;background-color:#ff3333;'> 
                  <h1>Insert header here</h1> 
                  <p> 
                   Vellant enes mo volupition eati 
                   amenima ximpor andis es mil 
                   mi, optate cum in niatqui de 
                   llabo. Turiti quos debis demo 
                   len dustis que peditat iorione 
                   quidignimin non con eaquatia 
                   nullore perit, totat incimol or 
                   rum, coriassequo quia aut eos 
                   unt quia dolent estemquodio. 
                  </p>           

                </td> 
               </tr> 
              </table> 

             </td> 
            </tr> 
           </table> 


          </td> <!-- End Col 1 --> 

         </tr>  
         <tr> 
          <td Id='BlueStripe' ColSpan='3'></td> 
         </tr>    
        </table> 
       </td> 
      </tr>    
     </table> 
</body> 


Ulteriori informazioni da un altro utente:

Nessuna delle risposte finora sembra aiutare. Ho centrato le mie tabelle impilate di livello superiore e tutte le tabelle nidificate allineate a sinistra con text-align:left; su tutti gli elementi possibili e non ha modificato nulla.

Quindi ho rimosso tutte le istanze di testo centrato e tabelle in tutto il codice e restituisce ANCORA con testo centrato in tutti i client di posta elettronica Web in IE 9. È interessante notare che se invio l'e-mail da Gmail o Yahoo in IE 9, esegue il rendering correttamente (senza dover aggiungere tutti gli allineamenti di allineamento/allineamento testo). Tuttavia, questa email deve provenire da Outlook, quindi non è una soluzione praticabile in questo caso.

+0

allineerà = "left" nel tag body non ha alcun effetto? –

+0

quale meccanismo usi per inviarlo? è un allegato di file HTML? o in qualche altro modo? – dldnh

+0

Stai affermando che l'email che hai inviato da Outlook è stata testata dal tuo mail.live.com. Hai provato a inviarlo a un altro server di posta gratuito (mail.google.com per esempio) e vedere come viene eseguito il rendering del messaggio di posta elettronica in IE. Il problema potrebbe essere nell'elemento HTML del contenitore? –

risposta

4

Probabilmente esiste un id/classe in conflitto nel tuo html, sebbene ciò avrebbe dovuto produrre lo stesso effetto in tutti i browser.

Non è possibile dirti cosa sta succedendo nel tuo browser. Prova a controllare gli elementi con gli strumenti di debug dei browser, questo dovrebbe dirti quali stili vengono applicati a loro e dovrebbero rivelare da dove proviene l'allineamento del testo.

In Internet Explorer il collegamento per lo strumento di debug è F12, utilizzare la freccia nella parte superiore sinistra di tale finestra per essere in grado di mettere a fuoco determinati elementi.

+0

Sì, hai ragione, sembra funzionare con altri browser, solo IE sta facendo casino. – IEnumerable

3

Per quanto fastidioso come sembra, provare ad aggiungere un in linea text-align: left; sui tag di paragrafo.

Per riferimento futuro, lo HTML Email Boilerplate è un'ottima base per quei temuti progetti di posta elettronica HTML.

+0

Ho aggiunto lentamente gli inline mentre eseguo ogni modifica incrementale, grazie per il link ref. – IEnumerable

4

Le email in HTML sono un incubo, ne ho costruito molte, molte, molte. Hai ispezionato il codice quando esegue il rendering in IE?

Ho trovato che i rendering di Live/Hotmail differiscono anche a seconda della versione di IE, figuriamoci altri browser.

Inoltre, e questo probabilmente suonerà offensivo - ma hai convalidato il codice?

Acclamazioni

3

So che questa domanda è vecchio, ma per riferimento futuro, ho notato che la contiene il testo principale non ha align = "left" specificato. Anche se è annidato in altri TD che DO align =: left ", IE di Iky non erediterà quell'impostazione.

<!-- Col 1/1 --> 

       <table id='' Style='border:0;text-align:left' align='left'> 
       <tr> 
       <td Id='LeftContentPanel' Width='460' [ALIGN="LEFT" NEEDED HERE]> 
       <h1>Insert heading here</h1> 
+0

Ma onora lo stile css 'text-align: left' che dovrebbe funzionare nel modo in cui viene utilizzato nello snippet di codice. – sg3s

+0

Dovrebbe, ma ho avuto IE predefinito per il testo centrato anche all'interno di una tabella allinea-sinistra. Il tag TD sopra non specifica specificatamente style = "text-align: left" o "align = left" a meno che manchi qualcosa. – Haikukitty

6

Prova a inserire un tag head e termina il tag HTML. Metti anche il tuo stile nel tuo header tag. Ho fatto questo e provato in IE Hotmail e ha funzionato per me.

+0

ha fatto questo lavoro per te? –

1

Il supporto CSS nei client di posta elettronica è terribile. Purtroppo l'invio tramite Outlook probabilmente lo renderà ancora peggiore. Potresti prendere in considerazione l'idea di utilizzare un servizio come mail chimp, ma suppongo che tu abbia già pensato a questo e l'invio tramite Outlook è un requisito del progetto, quindi ecco alcune opzioni possibili (sento il tuo dolore, io Ho dovuto sistemare cose simili).

Come regola generale del codice del pollice delle pagine come se fosse il 1999, ho trovato le risorse del monitoraggio della campagna inestimabili.

Ecco una guida pratica sulle buone pratiche generali: http://www.campaignmonitor.com/design-guidelines/

Una rottura completa giù di supporto dei CSS: http://www.campaignmonitor.com/design-guidelines/

E i forum sono piuttosto comodo: http://www.campaignmonitor.com/forums/

Non ti preoccupare io don lavorare per il monitoraggio della campagna! Solo cose che ho trovato utili.

Un paio di cose in mente che si potrebbe provare:

Forse avvolgere il testo nel div e mettere in linea text-align: left. O forse sul tag p.

Immagino che il tavolo esterno serva a centrare il design? Forse guarda una tecnica alternativa per centrare l'esterno.

0
<body style="text-align:left;"> 

Funziona come un fascino. E non devi metterlo per tutta la posta elettronica.