CSS et envoi mail format html

fabrice88 · 29 Août 2012

Bonjour,
Sur mon site j'ai un formulaire ou je récupère les informations envoyées par mes internautes.
Afin d'avoir une réception sympathique et mise en page j'ai donc fait en sorte que la réception soit faite en page html.
Lorsque je reçois les messages sur Outlook j'ai bien la mise en page que je souhaite mais si au lieu de passer par Outlook j'ouvre directement le webmail orange, ma mise en page saute complément (mes div ne sont plus prise en compte…) .
Voici comment j'envoi le formulaire.

Code:

$msg .= '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
			<html xmlns="http://www.w3.org/1999/xhtml">
			<head>
			<title>Mon message</title>
			<style type="text/css">
			<!--
			.Style1 {color: #FFFFFF}

			body { 
			background: #EAEAEA ; 
			color: #333333; 
			margin: 0; 
			padding: 0; 
			font-family:Arial, Verdana, Geneva, sans-serif; 
			font-size:12px; }
			
			#header { 
			width:800px; 
			margin:0 auto; 
			padding:32px 14px 0 14px; 
			position:relative;
			}
			table {
			 border-collapse:collapse;
			 }
			th, td {
			 border:1px solid black;
			 }
			caption {
			 font-weight:bold
			 }			
			#contenu { 
			width:780px; 
			margin:0 auto; 
			padding:10px 24px; position:relative; 
			} 
			
			#footer { 
			width:780px; 
			height : 70px;
			margin:0 auto; 
			padding:15px 24px 32px 24px; 
			color:#000;
			font-size: 9px
			
			} 
			#footer a { color:#FFFFFF;}
			#footer a:hover{ color:#666666;} 
			#footer p { margin:0; padding:0;}
			
			.gauche { float:left; margin-right:10px; }
			.adressed { float:right; margin:0 20px; width:250px;}
			

			.clear { clear:both;}
			
			h1 { margin:40px auto;}			
			-->
			</style>
			</head>


<body>
<div id="header">
	<img src="http://www.monsite.com/banniere.jpg" alt="banniere" width="250" height="70" class="gauche" />
	
	<div  class="adressed">
	<p>Le '.$date.'<br/></p>
	
	<p>'.$nom.' '.$prenom.'<br/>
	'.$adresse.'<br/>
	'.$cp.' '.$ville.'</p>
	</div>
	<div class="clear"></div>
</div>

	
<div id="contenu">
	<p><strong>Objet : contact depuis le site Internet</strong></p>
	<h1 align="center">Bienvenue</h1>
	<p>Madame, Monsieur, </p><br/>
	<p> Veuillez trouvez, ci-dessous, le détail du message qui vous a été transmis via le site Internet:</p>
	<table align="center" cellpadding="10">
		<tr>
			<th bgcolor="#000000" scope="col"><span class="blanc Style1">Photos</span></th>
			<th bgcolor="#000000" scope="col"><span class="blanc Style1">Ville</span></th>
			<th bgcolor="#000000" scope="col"><span class="blanc Style1">age</span></th>
			<th bgcolor="#000000" scope="col"><span class="blanc Style1">Materiel</span></th>
			<th bgcolor="#000000" scope="col"><span class="blanc Style1">Autre</span></th>
		</tr>
		
		<tr>
			<td>'.$nbphoto.'</td>
			<td>'.$ville.'</td>
			<td>'.$age.'</td>
			<td>'.$materiel.'</td>
			<td>'.$message.' €</td>
		</tr>
		<tr>
	</table>
	
	<div  class="adressed">
	<p>Le Webmaster<br />
		<a href="mailto:mail@monsite.fr">mail@monsite.fr</a></p>
	</div>
	<div class="clear"></div>
</div>
<div id="footer">
	<img src="http://www.monsite.fr/images/bas-carre.png" />
	<p>Ce message est ransmis depuis le site internet</p>
	
</div>	


</body>

</html>';
			
             

$headers .= 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
$headers .= "From: " .$mail."\r\n";
$headers .= 'Reply-To: ' .$mail."\r\n";

$cible = $mailb.';

/* Envoi du mail */
if ( !$erreur ) {
  mail($cible , "Message depuis le site" ,$msg,$headers);

Comment faire pour que le css fonctionne aussi chez les webmail comme orange ?

UsagiYojimbo · 29 Août 2012

Tu n'utilises pas de CSS, et tu reviens aux bons vieux tableau avec des styles inline, ça ira mieux.

Un détail sur le support du HTML des principaux clients : http://www.campaignmonitor.com/css/. Pour les webmail, il convient de vérifier en sus au cas par cas.

nickargall · 29 Août 2012

+1, on conseille plutôt les vieux tableaux de grand-mère pour la construction des Emails, c'est plus 'stable'