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

gplana
gplana used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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">
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

remove <html> from above snippet. html tages are repeated twice.

delete: 3rd line, first tag. <html>
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Thank you for your support. I will try tomorroy and will let you know.
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 ?
Finally I get a solution for myself. Instead of hidding elements by changing its display style to "hidden", what I'm doing is to comment elements that I want to hide (with HTML comments: <!--    .... -->) .

I know this is not the best solution, but it works.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial