Progress bar (Email)

Question

I am currently developing a template email.I need to display a progress bar of this style :

.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>

Yet nothing appears on the receipt of the email with outlook .... But when I open the email in the browser displays all perfectly ..

Thank you in advance for your help ...

Answer 1

Now try to table format as like this .

<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

The fact is that Outlook uses Word (not IE) for rendering HTML markup of emails. All supported and unsupported HTML elements, attributes, and cascading style sheets properties are described in the following articles 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)

Hope you will find these articles helpful.