Mailers have become an important part of business promotions for any industry. Creating a perfect HTML mailer which will work on all mailers has always been a question of discussion. Few things which I discover while working and solving bugs are noted below.
1. <p> html tag doesn't support font color in Rediffmail.
This code doesnt work on Rediffmail. Its better to use <div> instead of <p> to avoid this issue.
Simply use <div> and avoid this problem.
2. Background Image and Position:absolute CSS doesn't work on Rediffmail.
Background color works but Background image doesn't work on Rediffmail. You can use Background color in place of that image and compromise with your design. But you must be thinking why not use Position:absolute and place one element over another. But to disappoint you even the Position:absolute doesn't works. You can use following code to get better result.
HTML:
Share Your Solutions
1. <p> html tag doesn't support font color in Rediffmail.
<p style="color:#ffffff;">Give me some Sunshine!</p>
This code doesnt work on Rediffmail. Its better to use <div> instead of <p> to avoid this issue.
Simply use <div> and avoid this problem.
2. Background Image and Position:absolute CSS doesn't work on Rediffmail.
Background color works but Background image doesn't work on Rediffmail. You can use Background color in place of that image and compromise with your design. But you must be thinking why not use Position:absolute and place one element over another. But to disappoint you even the Position:absolute doesn't works. You can use following code to get better result.
HTML:
<div style="width:600px; height:600px; margin:0 auto;">
<div style="max-height:0;max-width:0;overflow: visible;">
<img src="image source"/>
</div>
<!--the image div which you will use as background -->
<div style="max-height:0;max-width:0;overflow: visible;">
<h1>Text Over the Background Image</h1>
</div>
<!--the div which will over the background -->
</div>
<!--both divs enclosed in a container div, the height needs to be the height of the image used as background -->
<div style="max-height:0;max-width:0;overflow: visible;">
<img src="image source"/>
</div>
<!--the image div which you will use as background -->
<div style="max-height:0;max-width:0;overflow: visible;">
<h1>Text Over the Background Image</h1>
</div>
<!--the div which will over the background -->
</div>
<!--both divs enclosed in a container div, the height needs to be the height of the image used as background -->
Share Your Solutions
