AOL Replaces Your Body Tag and Ignores Your CSS Body Properties


Although AOL offers fantastic support for WC3 standards, they’ve made some recent updates that effect your body styles and attributes.

First, it completely replaces your body tag. For example:

<body style="background:#000; min-height:2000px; color:#fff; padding:15px">

Get’s converted to:

<body style="background-color: white;font-family: Arial,sans-serif;font-size: 10pt;border: 0px;">

Second, it ignores your “body” type selector within your embedded CSS. For example:

<style type="text/css">
	body {
        background:#000; 
        min-height:2000px; 
        color:#fff; 
        padding:15px
    }
</style>
<body>
	Your content...
</body>

Get’s converted to:

<body style="background-color: white;font-family: Arial,sans-serif;font-size: 10pt;border: 0px;">
     <div id="AOLMsgPart_UniqueID">
         <style type="text/css">
         	#AOLMsgPart_UniqueID body {
                    background:#000; 
                    min-height:2000px; 
                    color:#fff; 
                    padding:15px
                    }  
         </style>
         
         Your content...
         
     </div>
 </body>

Since this is looking for a body within the AOLMsgPart div, it doesn’t pick up your styles. I tried inserting a second body tag just to see what happens but AOL ignored it. I also tried a few other CSS Attribute Selectors but since AOL inserts it’s own uniqueID for the div containing your email and it is separated by an underscore, there is no obvious way to hack it.

The Solution

Your best bet is to use a wrapper element like a span or a table with inline or embedded CSS properties. In a recent blog post we provide a great example of this solution which has been tested in all email clients: Background Colors in HTML Emails.

Author: Alex Ilhan

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies