htmlcssvml

VML Image showing up on top of HTML structure

This HTML Template runs perfectly fine on any browser, however (for email purposes) the top image:

src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"

It's being shown on top of my HTML code (e.g. Image being displayed on top of the following section 'Creating Email Magic') and have no idea why:

    <body style="margin:0;padding:0;">
    <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;">
        <tr>
        <td align="center" style="padding:0;">
            <table role="presentation" style="width:602px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;">
                <tr>
                    <td align="center" style="padding:40px 0 30px 0;">.

    <!--[if mso]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="position: relative; width: 602px; height: 170px;">
                    <v:fill type="tile" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" />
                        <v:textbox style="v-text-anchor:bottom" inset="0,0,0,0">
                            <div style="position: relative; text-align: center;">
                                <font color="#ffffff">
                                    <div style="position: absolute; bottom: 0; left: 0; padding: 20px; font-family: Georgia, serif; font-size: 50px;">
                                        <p style="color: white">&nbsp;&nbsp;VML Text on Image</p>
                                    </div>
                                </font>        
                        </v:textbox>
                </v:rect>
    <![endif]-->
    <!--[if !mso]><!-->
                
                        <div style="position: relative; text-align: center;">      
                            <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="" width="1100" style="height: 170px;display:block;" />
                            <p style="position: absolute; bottom: -30px; left: 16px; color: white; font-size: 50px">&nbsp;Non VML Text</p>
                        </div>
    <!--<![endif]-->
        
                </td>
                </tr>
            <tr>
                <td style="padding:36px 30px 42px 30px;">
                <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;">
                    <tr>
                    <td style="padding:0 0 36px 0;color:#153643;">
                        <h1 style="font-size:24px;margin:0 0 20px 0;font-family:Arial,sans-serif;">Creating Email Magic</h1>

On any browser:

browserpic

On Outlook:

outlook

Thanks

Solution

  • There are some things to change first and after that, some info on the problem.

    First: in 2023 we no longer use html tables. You can achieve the same with less code and in a very responsive way using div tables, flex tables or my favorite: CSS grid layout. I am attaching here a CSS Grid layout just for you:

    <style>
.angry-grid {
   display: grid; 

   grid-template-rows: 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr;
   
   grid-template-areas: 
    'header'
    'title'
    'body'
    'footer';
   
   gap: 0px;
   height: 100%;
   
}
  
#item-0 {

   background-color: #5c6ac5; 
   grid-area: header;
   
}
#item-1 {

   background-color: #b97ca8; 
   grid-area: title;
   
}
#item-2 {

   background-color: #9db9ae; 
   grid-area: body;
   
}
#item-3 {

   background-color: #7958df; 
   grid-area: footer;
   
}
</style>

<div class="angry-grid">
  <div id="item-0">Header</div>
  <div id="item-1">Title or something</div>
  <div id="item-2">Body with spam to all customers</div>
  <div id="item-3">some footer</div>
</div>

    Second: Email programs and webmail does not like position:absolute

    Third: If you still want to use html tables like in 1995 with text in red color :) then you could try and set the following to the row/cell after the image:

    z-index:99;

    that way it will no longer overlap.

    But I really recommend you to use a css grid layout for this, because customers will be able to read your spam in any device :)

    If you want to generate your own css grid layouts, or learn (it takes a couple of minutes to learn it) then go to this url

    https://angrytools.com/css-grid/

    There you will be able to generate as many css layouts as you want and for free