asked on

outlook mobile shows html text with style="display:none"

Dear expert:

I have an application which sends e-mails in html format. This HTML has embedded styles.

The e-mail is shown well in Microsoft Outlook 2002, but when received on a mobile phone it's not shown correctly on Outlook Mobile: some parts of the HTML which are supposed to be hidden are showed. I attach the HTML sended (please see DIVs with class="apartat" and style="display:none").

I suppose this is an incompatibility on Outlook Mobile with styles. Can you help me in encountering a workaround ?

<html><head><title>A TITLE HERE</title></head><body><style>
/* CSS Document */
background-color:#CCCCCC; border: #999999 1px solid;}
img {border:0}
.div_logo {padding:0; width:207px; float:right;}
.div_logo2 {margin:30px auto 0 286px; padding:0; width:207px; border:#333333 1px solid; }
.div_titol_i_text { margin:0; padding:7px; font-family:Verdana, Arial, Helvetica, sans-serif }
.div_programa {margin:0 auto 0 auto; padding:0; width:650px; }
.div_inscripcions {margin:0 auto 0 auto; padding:0; width:550px; }
h1 {text-align:center; }
h2 {text-align:center; color:#000066}
.separa { margin:150px 0 250px 0; }
.missatge {padding:10px 20px 10px 20px; border:#007700 3px solid; background-color:#BBFFFF; width:500px; margin:0 auto 0 auto; }
.error {padding:10px 20px 10px 20px; border:#FF0000 3px solid; background-color:#FFFFBB; width:500px; margin:0 auto 0 auto; }
.div_taula {margin:0 auto 0 auto; width:700px; }
.lletra_petita {font-size:smaller }
.mapa {margin: 0 auto 0 auto; width:425px}
</style>
	<div class="div_titol_i_text">
		<h2>Incid&egrave;ncies de Gu&agrave;rdia </h2>
		<h3 align="center">(Comunicat del Cap de Gu&agrave;rdia)</h3>
		<p align="center"><b>Dr. Plana Gavald&agrave;.</b></p>
		<p align="center"><strong>Parte del 16/07/09 a les 16:00 fins el 17/07/2009 a les 07:59<!-- a les 00:00 --></strong></p>
		<div class="apartat" style="[estil_resum]">
		<h3>Resum</h3>
		<p><table style="color:#000077">
		<tr>
			<td align="right">Altes d'urg&egrave;ncies:</td>
			<td align="left">72</td>
		</tr>
		<tr>
			<td align="right">Han marxat d'urg&egrave;ncies:</td>
			<td align="left">0</td>
		</tr>
		<tr>
			<td align="right">&Egrave;xitus a la casa:</td>
			<td align="left">0</td>
		</tr>
		<tr>
			<td align="right">Ingressos urgents:</td>
			<td align="left">1</td>
		</tr>
		<tr>
			<td align="right">Ingressos programats:</td>
			<td align="left">0</td>
		</tr>
		<tr>
			<td align="right">Derivacions:</td>
			<td align="left">0</td>
		</tr>
		</table><br />PROVA per veure el tema dels accents.</p>
		</div>
 
		<div class="apartat" style="display:none">
		<h3>Derivacions</h3>
		<p>[derivacions]</p>
		</div>
		
		<div class="apartat" style="display:none">		
		<h3>Problemes Assistencials</h3>
		<p>[probl_assistencials]</p>
		</div>
 
		<div class="apartat" style="display:none">				
		<h3>&Egrave;xitus</h3>
		<p>[exitus]</p>
		</div>
		
		<div class="apartat" style="display:none">
		<h3>Relacions Usuaris</h3>
		<p>[usuaris]</p>
		</div>
		
		<div class="apartat" style="display:none">
		<h3>Informaci&oacute; als mitjans de comunicaci&oacute;</h3>
		<p>[mitjans_com]</p>
		</div>
				
		<div class="apartat" style="display:none">
		<h3>Sortida personal sanitari</h3>
		<p>[sortida]</p>
		</div>
				
		<div class="apartat" style="display:none">
		<h3>Mesures aplicades per manca de llits</h3>
		<p>[mesures]</p>
		</div>
 
		<div class="apartat" style="[estil_hospitalitzacio]">
		<h3>Hospitalitzaci&oacute;</h3>
		<p><h4 style="color:#000077">Ingressos Urgents</h4><ul style="color:#000077"><li>DELGADO CA&Ntilde;AMERO, FRANCISCO (30514): Home de 67 anys. Ubicaci&oacute;:  (1007 Medicina Interna)</li></ul></p>
		</div>
<!--		
	<center>
		<table>
			<tr>
				<td>Derivacions:</td>
				<td>[derivacions]</td>
			</tr>
			<tr>
				<td>Problemes Assistencials:</td>
				<td>[probl_assistencials]</td>
			</tr>
			<tr>
				<td>&Egrave;xitus:</td>
				<td>[exitus]</td>
			</tr>
			<tr>
				<td>Relacions Usuaris:</td>
				<td>[usuaris]</td>
			</tr>
			<tr>
				<td>Informaci&oacute; als mitjans de comunicaci&oacute;:</td>
				<td>[mitjans_com]</td>
			</tr>
			<tr>
				<td>Sortida personal sanitari:</td>
				<td>[sortida]</td>
			</tr>
			<tr>
				<td>Mesures aplicades per manca de llits:</td>
				<td>[mesures]</td>
			</tr>
		</table>
	</center>
-->
	</div>
 
</body></html>

Open in new window

sajayj2009

I think you must specify the correct media type for CSS.

Seperate CSS from your page to a sheet.css

And refer the sheet.css to your page with correct media you are supposed to aim.

Like in computer, almost every css will render. So we must specify media type for css files while we are using for mobile, TV ..........

<link href="sheet.css" rel="stylesheet" type="text/css" media ="all">

sajayj2009

or else you must specify correct DTD....

Try the code below.

<!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">
<html><head><title>A TITLE HERE</title></head><body><style>
/* CSS Document */
background-color:#CCCCCC; border: #999999 1px solid;}
img {border:0}
.div_logo {padding:0; width:207px; float:right;}
.div_logo2 {margin:30px auto 0 286px; padding:0; width:207px; border:#333333 1px solid; }
.div_titol_i_text { margin:0; padding:7px; font-family:Verdana, Arial, Helvetica, sans-serif }
.div_programa {margin:0 auto 0 auto; padding:0; width:650px; }
.div_inscripcions {margin:0 auto 0 auto; padding:0; width:550px; }
h1 {text-align:center; }
h2 {text-align:center; color:#000066}
.separa { margin:150px 0 250px 0; }
.missatge {padding:10px 20px 10px 20px; border:#007700 3px solid; background-color:#BBFFFF; width:500px; margin:0 auto 0 auto; }
.error {padding:10px 20px 10px 20px; border:#FF0000 3px solid; background-color:#FFFFBB; width:500px; margin:0 auto 0 auto; }
.div_taula {margin:0 auto 0 auto; width:700px; }
.lletra_petita {font-size:smaller }
.mapa {margin: 0 auto 0 auto; width:425px}
</style>
        <div class="div_titol_i_text">
                <h2>Incid&egrave;ncies de Gu&agrave;rdia </h2>
                <h3 align="center">(Comunicat del Cap de Gu&agrave;rdia)</h3>
                <p align="center"><b>Dr. Plana Gavald&agrave;.</b></p>
                <p align="center"><strong>Parte del 16/07/09 a les 16:00 fins el 17/07/2009 a les 07:59<!-- a les 00:00 --></strong></p>
                <div class="apartat" style="[estil_resum]">
                <h3>Resum</h3>
                <p><table style="color:#000077">
                <tr>
                        <td align="right">Altes d'urg&egrave;ncies:</td>
                        <td align="left">72</td>
                </tr>
                <tr>
                        <td align="right">Han marxat d'urg&egrave;ncies:</td>
                        <td align="left">0</td>
                </tr>
                <tr>
                        <td align="right">&Egrave;xitus a la casa:</td>
                        <td align="left">0</td>
                </tr>
                <tr>
                        <td align="right">Ingressos urgents:</td>
                        <td align="left">1</td>
                </tr>
                <tr>
                        <td align="right">Ingressos programats:</td>
                        <td align="left">0</td>
                </tr>
                <tr>
                        <td align="right">Derivacions:</td>
                        <td align="left">0</td>
                </tr>
                </table><br />PROVA per veure el tema dels accents.</p>
                </div>
 
                <div class="apartat" style="display:none">
                <h3>Derivacions</h3>
                <p>[derivacions]</p>
                </div>
                
                <div class="apartat" style="display:none">              
                <h3>Problemes Assistencials</h3>
                <p>[probl_assistencials]</p>
                </div>
 
                <div class="apartat" style="display:none">                              
                <h3>&Egrave;xitus</h3>
                <p>[exitus]</p>
                </div>
                
                <div class="apartat" style="display:none">
                <h3>Relacions Usuaris</h3>
                <p>[usuaris]</p>
                </div>
                
                <div class="apartat" style="display:none">
                <h3>Informaci&oacute; als mitjans de comunicaci&oacute;</h3>
                <p>[mitjans_com]</p>
                </div>
                                
                <div class="apartat" style="display:none">
                <h3>Sortida personal sanitari</h3>
                <p>[sortida]</p>
                </div>
                                
                <div class="apartat" style="display:none">
                <h3>Mesures aplicades per manca de llits</h3>
                <p>[mesures]</p>
                </div>
 
                <div class="apartat" style="[estil_hospitalitzacio]">
                <h3>Hospitalitzaci&oacute;</h3>
                <p><h4 style="color:#000077">Ingressos Urgents</h4><ul style="color:#000077"><li>DELGADO CA&Ntilde;AMERO, FRANCISCO (30514): Home de 67 anys. Ubicaci&oacute;:  (1007 Medicina Interna)</li></ul></p>
                </div>
<!--            
        <center>
                <table>
                        <tr>
                                <td>Derivacions:</td>
                                <td>[derivacions]</td>
                        </tr>
                        <tr>
                                <td>Problemes Assistencials:</td>
                                <td>[probl_assistencials]</td>
                        </tr>
                        <tr>
                                <td>&Egrave;xitus:</td>
                                <td>[exitus]</td>
                        </tr>
                        <tr>
                                <td>Relacions Usuaris:</td>
                                <td>[usuaris]</td>
                        </tr>
                        <tr>
                                <td>Informaci&oacute; als mitjans de comunicaci&oacute;:</td>
                                <td>[mitjans_com]</td>
                        </tr>
                        <tr>
                                <td>Sortida personal sanitari:</td>
                                <td>[sortida]</td>
                        </tr>
                        <tr>
                                <td>Mesures aplicades per manca de llits:</td>
                                <td>[mesures]</td>
                        </tr>
                </table>
        </center>
-->
        </div>
 
</body></html>

Open in new window

SOLUTION

sajayj2009

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

gplana

ASKER

Thank you for your support. I will try tomorroy and will let you know.

gplana

ASKER

I make the changes you suggested, but the problem still stays: the texts with style "display:none" appears when using outlook mobile (but not when using outlook on a PC computer).

Any other idea ?

ASKER CERTIFIED SOLUTION

gplana

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

outlook mobile shows html text with style=&quot;display:none&quot;

outlook mobile shows html text with style="display:none"