2010-09-14 17 views
0

Je ne peux pas sembler obtenir l'email pour afficher correctement dans hotmail et gmail (voir l'image ci-jointe) mais tout fonctionne très bien dans mon client.Quel est le problème avec ce code HTML dans mon courrier électronique?

Quel est le problème avec mon code/Ou est-ce un problème avec gmail/htmail?

  • Comment ça n'a pas l'air:

alt text

Comment le résultat:

alt text

Code:

<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 le résultat:

Répondre

3

Chaque email gère client CSS différemment. Gmail est connu pour son manque de support CSS. Pour le rendre cohérent sur tous les clients/webapps, vous devrez probablement utiliser des tables avec des styles en ligne.

Ce lien est utile: http://www.campaignmonitor.com/css/

+0

[Cet article] (http://www.groundwire.org/support/articles/css-and-email-newsletters) est également utile pour expliquer pourquoi cela pourrait se produire - comme chris say fait le CSS en ligne et ne stylise pas la balise body car elle est souvent ignorée aussi :) – stephenmurdoch

+0

aussi, le conseil de chris sur l'utilisation des tables est un bon conseil – stephenmurdoch