В чем проблема с этим HTML в моей электронной почте? - PullRequest
0 голосов
/ 14 сентября 2010

Кажется, я не могу правильно отобразить электронную почту в hotmail и gmail (см. Прикрепленное изображение), но в моем клиенте все работает нормально.

В чем проблема с моим кодом / Или это проблема с gmail / htmail?

  • Как это выглядит:

alt text

Как это должно выглядеть:

alt text

код:

    <html>

<STYLE>
#header

{
top:20px;
position: absolute;
left:101px;
width: 540px;
font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
border-bottom: 1px solid #999;
height: 110px;
}

#logo a

{
position: relative;
left: -40px;
}

#bookname

{
position: relative;
top: 5px;
font-size: 20px;
background: #B0E2FF;
font-weight: bold;
color: #666;
text-decoration: none;
}

#book_description

{
font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
font-size: 95%;
}

.numba

{
background: #FF6347;
color: #ffffff;
position: relative;
top: 40px;
font-size: 20px;
font-weight: bold;
width: 23px;
}

.numba10

{
background: #FF6347;
color: #ffffff;
position: relative;
top: 40px;
font-size: 20px;
font-weight: bold;
width: 38px;
}

#main_body

{
position: absolute;
left: 101px;
top: 140px;
width: 540px;
height: 1690px;
font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
border-bottom: 1px solid #999;
font-weight: 95%;
}

#key

{
position: relative;
top: 40px;
font-size: 20px;
background: #ff9;
font-weight: bold;
color: #666;
width: 291px;
}

.p1

{
position: relative;
top: 34px;
font-size: 95%;
}

.pcl

{
position: relative;
top: 57px;
font-size: 95%;
}

#close

{
position: relative;
top: 51px;
font-size: 20px;
background: #ff9;
font-weight: bold;
width: 126px;
color: #666;
}

#link_buy_amazon

{
color: #27AAE1;
font-weight: bold;
}

#footer

{
font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
left: 101px;
color: #666;
font-size: 15px;
position: absolute;
top: 1850px;
width: 540px;
}

#unsub

{
background: #ff9;
color: #666;
}

#Forwardthis

{
background: #ff9;
color: #666;
position: absolute;
top: 22px;
left: 435px;
}

#Blurb_author

{
color: #27AAE1;
font-weight: bold;
}

#forwardit {background: #CAE7FB;
color: #666;}

img
{  
border-style: none;
}

</STYLE>


<body>

<div id='header'>

<a id ='Forwardthis' href="*|FORWARD|*">Forward This</a> 

<a id ='logo' href='http://Blurb.fm'><img src='http://img844.imageshack.us/img844/6943/blurblogo1.png'></a>

</div>

<div id ='main_body'>

<a id='bookname' href='http://www.amazon.com/How-We-Decide-Jonah-Lehrer/dp/0618620117'>How We Decide by Jonah Lehrer</a>
</br><br>
<div id='book_description'>
This book is about our two brains. Our logical brain and our emotional brain. What it suggests is that the emotional brain, "our gut" as some would call it, is actually smarter
than our logical brain. The author puts forward a lot of great insights to prove this point.
</div>
<br>
Blurb Made By: <a id='Blurb_author' href='http://twitter.com/taphangum'>Tapha Ngum</a>
<div id='key'>Key Ideas From The Book</div>
<p class='numba'>1.</p>
<p class='p1'>
When you feel that you are 'drawn' to something. It is actually because your mind has already decided that it wants that thing. All alternatives have 
been assessed and a decision has already been unconciously made.
</p>
<p class='numba'>2.</p>
<p class='p1'>
Feelings are quite often a very accurate shortcut to use in making a decision. They have years upon years of experience to rely on. "They already know how to do it" as the author says.
</p>
<p class='numba'>3.</p>
<p class='p1'>
The ideal environment for the best decision making is usually one where there are a good variety of opinions all simulataneously being shared openly.
<p class='numba'>4.</p>
</p>
<p class='p1'>
The best decision makers rarely get down on the decision they have made. Instead they become "students of error", determined to know what went wrong so that next time they will do better.
<p class='numba'>5.</p>
</p>
<p class='p1'>
The mind is full of flaws, but they can usually be outsmarted. 
<p class='numba'>6.</p>
</p>
<p class='p1'>
The best way to make sure your brain is working properly is to study your brain at work. To listen to the internal conflict going on inside your head.
</p>
<p class='numba'>7.</p>
<p class='p1'>
Your goal as a person should be to learn from mistakes when they dont count. So that when they do you're prepared to do it the right way. A good example of this is Flight school simulators. They allow the pilot to
have the full emotional experience of being in a plane without the risk of any real danger.
</p>
<p class='numba'>8.</p>
<p class='p1'>
Even though the emotional brain is very often accurate it does not actually mean that it can always be trusted. It also can sometimes be "impulsive and short-sighted" and "A little too sensitive to patterns" . 
</p>
<p class='numba'>9.</p>
<p class='p1'>
People often think that more information is always better. But more often than not when you give the brain too many facts "Your asking for trouble". Doin this leads to buying the wrong items at walmart for example. Or picking the
wrong stocks. 
</p>
<p class='numba10'>10.</p>
<p class='p1'>
After a group of black students did worse on their I.Q. tests than white students. (Psychologist) Claude Steel set another test. But this time it was described as a preparatory drill instead of a measure of
intelligence (this point was stressed). What ended up happening was that the I.Q scores of both black and white students were virtually idntical. The achievement gap in that instance had been closed.   
</p>
<div id='close'>Conclusion</div>
<p class='pcl'>
Gaining a better understanding of the human mind has always been one of my great interests, so this book was always going to get high ratings from me. But even so, this really does give you huge
insight into how we as human beings think and decide. It does get VERY specific at times but in all, this book is definitely one to buy.   
</p>
</div>

<div id='footer'>

*|LIST:DESCRIPTION|* <br />
<br />
<a id='unsub' href="*|UNSUB|*">Unsubscribe</a> <b>*|EMAIL|*</b> from this list.<br />

<br />
Our mailing address is:<br />
<br>
<b>*|LIST:ADDRESS|*</b><br />
<br />
Copyright (C) 2010 <b>*|LIST:COMPANY|*</b> All rights reserved.<br />
<br />
Sharing is caring! So forward this email to someone you KNOW will love it :). 
<br><br>
<a id='forwardit' href="*|FORWARD|*">Click Here To Forward</a> 

</div>

</div>


</body>
</html>

[3]: http://i.stack.imgur.com/rzTfP.pngHow должно выглядеть:

1 Ответ

3 голосов
/ 14 сентября 2010

Каждый почтовый клиент обрабатывает CSS по-своему.Gmail печально известен отсутствием поддержки CSS.Чтобы обеспечить согласованность всех клиентов / веб-приложений, вам, вероятно, придется использовать таблицы со встроенными стилями.

Эта ссылка полезна: http://www.campaignmonitor.com/css/

...