Can't change font color of text in Internet Explorer...

  •  12-30-2010, 5:10 PM

    Can't change font color of text in Internet Explorer...

    Hi -
     
    We are having a strange problem in Internet Explorer (IE8) and I have been able to duplicate the issue using the demo on your site.  When I highlight content and try to change the font color, sometime it isn't the selected content that changes color but content to the left of it.  (Sometimes immediately to the left and sometimes 10-15 characters away. )  There doesn't seem to be any rhyme or reason to it.
     
     I am including the HTML we are using below... It is an HTML email.
     
    Any help would be greatly appreciated!!!!
     
    Thanks!
     

     

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">

    A:link {text-decoration: underline; color: #588db1;}
    A:visited {text-decoration: underline; color: #588db1;}
    A:active {text-decoration: underline; color: #588db1;}
    A:hover {text-decoration: underline; color: #588db1;}
     
    </style>
    </head>
    <body text="#555553"  link="#588db1"  vlink="#588db1" alink="#555553" bgcolor="#eadab7" style="background-color:#eadab7">
    <a name="top"></a>
    <center>
    <div align="center">
      <table cellspacing="0" cellpadding="0" width="100%" height="100%"  bgcolor="#eadab7" border="0" style="background-color:#eadab7">
        <tr>
          <td align="center"><br />
          
            <br />
    <table cellspacing="0" cellpadding="0" width="666" bgcolor="#ffffff" border="0">
                    <tr>
                      <td><table cellspacing="0" cellpadding="0" width="666" bgcolor="#ffffff" border="0">
                            <td align="center" height="20" bgcolor="#afcd6f" colspan="4">&nbsp;</td>
                        </tr>
                        </table>
                        <table cellspacing="0" cellpadding="0" width="666" bgcolor="#ffffff" border="0">
                          <tr>
                           
                            <td valign="top" width="25">&nbsp;</td>
                            <td valign="top"  style="FONT-SIZE: 12px; font-family:Trebuchet MS, Arial, Helvetica; color:#555553" align="left">
                            <br /><br /><br />
                            <span style="FONT-SIZE: 24px; font-family:Trebuchet MS, Arial, Helvetica; color:#9cbc61">Goings on around!</span>
                            <br />
                            <br />
                            <b>Check out our latest Newsletter and some of the great events happening at this summer!</b>
                            <br />
                      
                            <ol>
                            <li><a href="#1">Item 1</a></li>
                            <li><a href="#2">Item 2</a></li>                     
                            <li><a href="#3">Item 3</a></li>                                              
                            </ol> 
                            <br />
                            <hr style="height: 0; border-style: dashed; border-width: 1px 0 0 0; border-color:#b5bba2; width:100%">
                            <a name="1" id="1"></a>
                            <br />

                            <span style="FONT-SIZE: 18px; font-family:Trebuchet MS, Arial, Helvetica; color:#9cbc61">Item 1 Title</span>
                           
                            <br />
                            <br />
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique eros non erat scelerisque sed mattis nisi condimentum. Phasellus ultrices mollis metus, aliquam faucibus magna auctor at. Cras a erat placerat massa luctus dapibus sit amet eget nisl. Sed imperdiet ante ut turpis ultrices et consequat velit laoreet. Morbi ullamcorper, tellus nec malesuada interdum, ipsum nisi venenatis urna, semper mattis ante mi vel nulla.
                              <br /><br />
                            <hr style="height: 0; border-style: dashed; border-width: 1px 0 0 0; border-color:#b5bba2; width:100%">
                            <a name="2" id="2"></a>
                            <br />

                            <span style="FONT-SIZE: 18px; font-family:Trebuchet MS, Arial, Helvetica; color:#9cbc61">Item 2 Title</span>
                           
                            <br />
                            <br />
                           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique eros non erat scelerisque sed mattis nisi condimentum. Phasellus ultrices mollis metus, aliquam faucibus magna auctor at. Cras a erat placerat massa luctus dapibus sit amet eget nisl. Sed imperdiet ante ut turpis ultrices et consequat velit laoreet. Morbi ullamcorper, tellus nec malesuada interdum, ipsum nisi venenatis urna, semper mattis ante mi vel nulla.
                           
                             <br /><br />
                            <hr style="height: 0; border-style: dashed; border-width: 1px 0 0 0; border-color:#b5bba2; width:100%">
                            <a name="3" id="3"></a>
                            <br />

                            <span style="FONT-SIZE: 18px; font-family:Trebuchet MS, Arial, Helvetica; color:#9cbc61">Item 3 Title</span>
                           
                            <br />
                            <br />
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique eros non erat scelerisque sed mattis nisi condimentum. Phasellus ultrices mollis metus, aliquam faucibus magna auctor at. Cras a erat placerat massa luctus dapibus sit amet eget nisl. Sed imperdiet ante ut turpis ultrices et consequat velit laoreet. Morbi ullamcorper, tellus nec malesuada interdum, ipsum nisi venenatis urna, semper mattis ante mi vel nulla.
                           
                             <br />
                             <br /><br /><br />
                            
                          
                            </td>
                            <td width="45">&nbsp;</td>
                          </tr>
                        </table>
                      
                
                  <br />
                  <br /></td>
              </tr>
            </table></td>
        </tr>
      </table>
    </div> 
    </center>
    </body>
    </html>

     

View Complete Thread