Progress bar (e-mail)

Question

Attualmente sto sviluppando un modello email.i bisogno di visualizzare una barra di avanzamento di questo stile:

.progress { 
 
    width:100px; 
 
} 
 
.progressleft { 
 
    float: left; 
 
    height: 15px; 
 
} 
 
.progressright { 
 
    overflow: hidden; 
 
    height: 15px; 
 
}

<div style="position:relative;top: 20px; text-align:center; color:#ffffff;">50%</div> 
 
<div style="width:250px"> 
 
<div id="prog4" class="progressleft" style="width:50%;text-align:center;background-color: #f83;"></div> 
 
<div class="progressright" style="background-color: #ccc;"bgcolor="#ccc"></div>

Eppure, non viene visualizzato nulla sul ricevimento della e-mail con Outlook .... Ma quando apro la posta elettronica nel browser visualizza tutti perfettamente ..

vi ringrazio in anticipo per il vostro aiuto ...

Answer 1

Ora prova a formattare la tabella come in questo modo.

<table style="border:0;" cellpadding="0" cellspacing="0" width="250"> 
 
<tr> 
 
    <td bgcolor="#f83f83" style="width:50%; background-color:#f83f83; float:left; height:15px;"></td> 
 
    <td bgcolor="#cccccc" style="width:50%; background-color:#cccccc; float:left; height:15px;"></td> 
 
    </tr> 
 
</table>

Answer 2

Il fatto è che Outlook utilizza Word (non IE) per il rendering HTML markup di email. Tutti gli elementi HTML supportate e non supportate, attributi, e fogli di stile CSS proprietà sono descritte nei seguenti articoli in MSDN:

• Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
• Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)

auguriamo che troverete questi articoli utili.