Верстка для почтовых рассылок

dmitriy977 · October 26, 2011

В Windows Live Mail и Hotmail размер имиджей не соответвует действительным в режиме отключенных фотографий причем только по высоте.

На картинке четко видно что размер имиджа больше в разы чем прописан в html а именно 57px.



<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
            	<tr>
                	<td height="43" align="center" valign="top">
                        <table border="0" cellpadding="0" cellspacing="0" width="886" id="templatePreheader">
                            <tr>
                                <td valign="top" class="preheaderContent">
                                    <table border="0" cellpadding="5" cellspacing="0" width="100%">
                                    	<tr>
                                        	<td valign="top" bgcolor="#000000">
                                            <div mc:edit="std_preheader_links">
                                            ??kil g?rs?nm?diyi halda xahi? edirik ??kill?rin bax?lmas?n? mayl?n yuxar? hiss?sind? aktiv edin v? ya g?st?ril?n link? <a href="" target="_blank">ke?in</a>
                                            </div>
                                            </td>
                                      </tr>
                                         <tr>   
                        					<td valign="top" bgcolor="#000000">
                                            	<div mc:edit="std_preheader_content">
                                                	  G?l?c?kd? REPLAY mesajlar?n? rahat almaq ???n replay@fashion-e-newsletters.com ?nvan?n? ?nvanlar kitab?an?za ?lav? edin.
                                              </div>
                                            </td>
						                </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                  </td>
               </tr>


                   <tr valign="top">
                	<td height="421" align="center" valign="top">

            <!-- // End Template Preheader \\ -->

<table border="0" cellpadding="0" cellspacing="0" width="886" bgcolor="#FFFFFF">
       <tr>
         <td align="center" valign="top">
                                    <!-- // Begin Template Header \\ -->
                            <table border="0" cellpadding="0" cellspacing="0" width="886">                          <tr bgcolor="#000000" height="57">
                          <td colspan="3" width="210" class="headerContent" align="left" height="57">
                            <img src="http://gallery.mailchimp.com/3587a7cbc79ce657fca134000/images/replay_logo.jpg" width="210" height="57" align="left" style="max-width:210px;display:block;" / >
                          </td>
                         </tr>
                         <tr height="189" >
                          <td colspan="3" class="headerContent" width="886"  height="189">
                           <img src="http://gallery.mailchimp.com/3587a7cbc79ce657fca134000/images/replay_topbaner.jpg" width="886" height="189" alt="Xahi? edirik ??kill?rin bax?lmas?n? mayl?n yuxar? hiss?sind? aktiv edin" style="max-width:886px;display:block;"/>
                          </td>
                         </tr>
                         <tr height="210"> 
                          <td class="headerContent" width="261" height="210">
                      <img src="http://gallery.mailchimp.com/3587a7cbc79ce657fca134000/images/replay_middlebaner_left.jpg" width="261" height="210" alt="Xahi? edirik ??kill?rin bax?lmas?n? mayl?n yuxar? hiss?sind? aktiv edin" style="max-width:261px;display:block;"/>
                          </td>
                          <td class="headerContent" width="141" height="210">
                           <img src="http://gallery.mailchimp.com/3587a7cbc79ce657fca134000/images/Animated_Door.gif" width="141" height="210" alt="Xahi? edirik ??kill?rin bax?lmas?n? mayl?n yuxar? hiss?sind? aktiv edin" style="max-width:141px;display:block;"/>
                          </td>
                          <td class="headerContent" width="484" height="210">
                     <img src="http://gallery.mailchimp.com/3587a7cbc79ce657fca134000/images/replay_middlebaner_right.jpg" width="484" height="210" alt="Xahi? edirik ??kill?rin bax?lmas?n? mayl?n yuxar? hiss?sind? aktiv edin" style="max-width:484px;display:block;"/>
                          </td>
                         </tr>
                         <tr  height="49" >
                          <td colspan="3" class="headerContent" width="886" >
                           <img src="http://gallery.mailchimp.com/3587a7cbc79ce657fca134000/images/replay_bottombaner.jpg" width="886" height="49" alt="Xahi? edirik ??kill?rin bax?lmas?n? mayl?n yuxar? hiss?sind? aktiv edin" style="max-width:886px;display:block;"/>

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

 </td>
                   </tr>


                  <tr>
                	<td align="center" valign="top">  

<!-- // 
<table width="800" border="0" cellspacing="2" cellpadding="2">
 <tr>
    <td align="center" valign="top"> 
    <span style="font-size:14px; font-family: Arial, Helvetica, sans-serif;">
Guess By Marciano Siz? qlamur fashion kolleksiyas?n? t?qdim
edir! Kokteyl geyiml?r, fashion aksessuarlar m?k?mm?l g?rk?m yaradacaq.<br><br>

?nvan: ?.Hac?b?yov 27, Tel: 4935749
</span> <br>

 <a href="http://www.facebook.com/GUESSbyMarciano" target="_blank">http://www.facebook.com/GUESSbyMarciano</a>
<br> <br>

<span style="font-size:12px; font-family: Arial, Helvetica, sans-serif;">
Siz bu e-mayl? Guess By Marciano ma?azas?n?n eksklyuziv m??t?risi oldu?unuza g?r? v? al??-veri? etiyiniz zaman ma?az?n?n yenilikl?rin? yaz?ld???n?za g?r? alm?s?z.
</span> 
    </td> 
    </tr>
</table>
\\ -->
  </td>
          </tr>
   </td> 
    </tr>
</table>

Searcher · October 26, 2011

Возможно, не соответствует, но в чем вопрос то?

dmitriy977 · October 26, 2011

Возможно, не соответствует, но в чем вопрос то?

Вопрос что нужно прописать в коде что бы даже в режиме отключенных имиджий рамки занимали нужный размер иначе происходят дикие разъезды и newsletter отображается ужасно.

Searcher · October 26, 2011

вариант 1: прописать размер в style.

Вопрос, а Windows Live Mail и Hotmail это какие-то программы? Или все-таки речь идет об отображении кода письма на этих сайтах в броузерах? Если второе, то посмотрите в Firebug или аналоге, что там в dom творится с этими элементами. Я не знаю как там парсится письмо...

sigma77 · October 26, 2011

вариант 1: прописать размер в style.
Вопрос, а Windows Live Mail и Hotmail это какие-то программы? Или все-таки речь идет об отображении кода письма на этих сайтах в броузерах? Если второе, то посмотрите в Firebug или аналоге, что там в dom творится с этими элементами. Я не знаю как там парсится письмо...

Windows Live Mail - если не ошибаюсь аналог Outlook Express в семерке.

Hotmail - такая же фигня как яху, гугл и пр. Т.е. всё в браузере.

Searcher · October 26, 2011

Windows Live Mail - если не ошибаюсь аналог Outlook Express в семерке.
Hotmail - такая же фигня как яху, гугл и пр. Т.е. всё в браузере.

Я как-то не сталкивался с особенностями верстки в Windows Live Mail, так что ждем других участников форума, а про Hotmail я уже сказал, что надо смотреть dom результата вывода письма, может там какие-то свойства подменяются...

dmitriy977 · October 26, 2011

вариант 1: прописать размер в style.
Вопрос, а Windows Live Mail и Hotmail это какие-то программы? Или все-таки речь идет об отображении кода письма на этих сайтах в броузерах? Если второе, то посмотрите в Firebug или аналоге, что там в dom творится с этими элементами. Я не знаю как там парсится письмо...

Прописал в style имиджа, тд, тр height ничего не изменилось.

Windows Live Mail это декстоп маил клиент типа оутлука, hotmail проверяю через броузер но тот же самый newsletter в gmail отображается правильно.

sigma77 · October 26, 2011

dmitriy977,

А если не отключать картинки, размеры соответствуют?

Если да, то может оборачивать их в блоки с соответствующими размерами и overflow:hidden?

p.s. Посмотреть, что может быть не так не могу. Ни первого, ни второго нету.

Edited October 26, 2011 by sigma77

Searcher · October 26, 2011

вариант 1: прописать размер в style.
Вопрос, а Windows Live Mail и Hotmail это какие-то программы? Или все-таки речь идет об отображении кода письма на этих сайтах в броузерах? Если второе, то посмотрите в Firebug или аналоге, что там в dom творится с этими элементами. Я не знаю как там парсится письмо...
Прописал в style имиджа, тд, тр height ничего не изменилось.
Windows Live Mail это декстоп маил клиент типа оутлука, hotmail проверяю через броузер но тот же самый newsletter в gmail отображается правильно.

Так что там в firebug то у hotmail с размерами картинок происходит?

dmitriy977 · October 26, 2011

dmitriy977,
А если не отключать картинки, размеры соответствуют?
Если да, то может оборачивать их в блоки с соответствующими размерами и overflow:hidden?
p.s. Посмотреть, что может быть не так не могу. Ни первого, ни второго нету.

да в с включенными картинками все размеры правильные.

вариант 1: прописать размер в style.
Вопрос, а Windows Live Mail и Hotmail это какие-то программы? Или все-таки речь идет об отображении кода письма на этих сайтах в броузерах? Если второе, то посмотрите в Firebug или аналоге, что там в dom творится с этими элементами. Я не знаю как там парсится письмо...
Прописал в style имиджа, тд, тр height ничего не изменилось.
Windows Live Mail это декстоп маил клиент типа оутлука, hotmail проверяю через броузер но тот же самый newsletter в gmail отображается правильно.
Так что там в firebug то у hotmail с размерами картинок происходит?

Смотрю через chrome там откудо то берутся размеры tr напр. 240 пикселей для первого. хотя этой цифры 240 вообще нигде нет в html у меня..

вариант 1: прописать размер в style.
Вопрос, а Windows Live Mail и Hotmail это какие-то программы? Или все-таки речь идет об отображении кода письма на этих сайтах в броузерах? Если второе, то посмотрите в Firebug или аналоге, что там в dom творится с этими элементами. Я не знаю как там парсится письмо...
Прописал в style имиджа, тд, тр height ничего не изменилось.
Windows Live Mail это декстоп маил клиент типа оутлука, hotmail проверяю через броузер но тот же самый newsletter в gmail отображается правильно.
Так что там в firebug то у hotmail с размерами картинок происходит?

Смотрю через chrome там откудо то берутся размеры tr напр. 240 пикселей для первого. хотя этой цифры 240 вообще нигде нет в html у меня..

e.check@hotmail.com

pass: 123654

если у кого есть время.

последний email

разобрался )

Всем спасибо за совет с Firebug!!

Sign In

Верстка для почтовых рассылок

Question

dmitriy977

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

dmitriy977

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

dmitriy977

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

dmitriy977

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information