HTML

Render Error: iOS layering images

Caleb Larsen Leave a comment

This week a client brought an unusual rendering problem to the CALM team. In the iOS native Mail app the email was appearing very broken, with images and content layered and floating on top of each other. iOS is generally a very easy going email renderer, supporting a ton of modern CSS and standard HTML.  So when this issue was brought to our attention, it was baffling to say the least.

The email itself was very simple, basically a text preheader, a series of images stacked in tables stacked, and a footer. At the client’s request, we coded the images in the email without a defined height.  It is generally best practice to define a height for an image, however in this case, leaving the height to be computed enables the client to easily update the images at the last minute.

We dug into the problem right away. After ruling out a syntax error, things got interesting. After some troubleshooting, we discovered that iOS Mail in iOS 7-9 on the iPhone 5s and iPhone 6 when confronted with images without a defined height and no other elements to define their height loses its mind and tries to layer them on top of each other.

This is the simplest example we could contrive: two images in the body of an HTML document without a defined height. (The opacity is set so that we can see how iOS is layering the images.)

Litmus: https://litmus.com/builder/b5e2291

Bare Bones Example
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head></head>
<body>
 
  <table cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <img src="http://imgur.com/j5RP8TZ.jpg" width="600"  border="0" alt="" style="display:block; opacity:0.5;" />
 
        <img src="http://imgur.com/orlJvEm.jpg" width="600"  border="0" alt="" style="display:block; opacity:0.5;"  />        
      </td>
    </tr>
  </table>
  
</body>
</html>

Cat's heads don't generally float over their feet.
Cat’s heads don’t generally float over their feet.

In this example, we’ve wrapped the two images in a container table and that seems to have solved the problem.

Litmus: https://litmus.com/builder/8e69941

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head></head>
<body>
 
  <table cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <img src="http://imgur.com/j5RP8TZ.jpg" width="600"  border="0" alt="" style="display:block; opacity:0.5;" />
 
        <img src="http://imgur.com/orlJvEm.jpg" width="600"  border="0" alt="" style="display:block; opacity:0.5;"  />        
      </td>
    </tr>
  </table>
 
</body>
</html>

fixedCatGrid
However, what happens if we split the two images into their own tables.

Litmus: https://litmus.com/builder/12ac542

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head></head>
<body>
 
  <table cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <img src="http://imgur.com/j5RP8TZ.jpg" width="600"  border="0" alt="" style="display:block; opacity:0.5;" />
      </td>
    </tr>
  </table>
 
  <table cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <img src="http://imgur.com/orlJvEm.jpg" width="600"  border="0" alt="" style="display:block; opacity:0.5;"  />        
      </td>
    </tr>
  </table>
  
</body>
</html>


Everything appears fine, but if we add some text at the same level as the container tables, things break again.

Litmus: https://litmus.com/builder/e6a6df4

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head></head>
<body>
 
    Some text at root level
 
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>
            <img src="http://imgur.com/j5RP8TZ.jpg" width="600"  border="0" alt="" style="display:block; opacity:0.5;" />
            </td>
        </tr>
    </table>
 
        <table cellspacing="0" cellpadding="0">
        <tr>
            <td>
    <img src="http://imgur.com/orlJvEm.jpg" width="600"  border="0" alt="" style="display:block; opacity:0.5;"  />        
            </td>
        </tr>
    </table>
    
</body>
</html

 

The simplest and most reliable solution we settled on is to make just sure our content is wrapped in a container table. This is generally best practice anyway and perhaps why we’ve not seen this problem before.

Litmus: https://litmus.com/builder/a307451

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head></head>
<body>
 
  Some text at root level
  <table cellspacing="0" cellpadding="0">
    <tr>
      <td>
 
        <table cellspacing="0" cellpadding="0">
          <tr>
            <td>
              <img src="http://imgur.com/j5RP8TZ.jpg" width="600"  border="0" alt="" style="display:block; opacity:0.5;" />
            </td>
          </tr>
        </table>
 
        <table cellspacing="0" cellpadding="0">
          <tr>
            <td>
              <img src="http://imgur.com/orlJvEm.jpg" width="600"  border="0" alt="" style="display:block; opacity:0.5;"  />        
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
 
</body>

 

We will keep exploring this error and will post any updates.  Please post a comment with any questions or solutions that you have found.

Read More

So, You Want to Learn HTML?

Lyla Reinero

Learning how to code HTML (ahem!) almost 10 years ago, without a doubt, changed my life for the better. It provided an opportunity to change careers in a completely new direction, shortly after my first child was born. Previously, I was the Sommelier + Maitre’d of a 4-star rated restaurant, a job that I loved, and in which I excelled. However, as I quickly discovered after returning from my maternity leave, trying to maintain the long hours required with restaurant management, along with the demands of a newborn did not make for a happy family life. I was most fortunate that my brother encouraged me to take a course in HTML. I remember being terrified, and had serious doubts that I could learn coding, but my awesome brother assured me that “any half-way smart person” could learn it…so that’s what I did!

There are many great books out there, and I got my start by reading Beginning Web Programming with HTML, XHTML, and CSS (now in 2nd Edition) by Jon Duckett, and enrolling in a 2 day intensive HTML course at LearnIt!, a San Francisco Bay Area based outfit, that now also offers Live Online Training. As luck would have it, the previously mentioned awesome brother was launching a boutique Email Creative Services agency, and I was able to hit the ground running with immediate part-time contract work, which enabled me to stay home with my baby daughter. Regardless of what a person does with their acquired HTML skills, it can be used across a wide array of career paths from Coding and Graphic Design, to Marketing and Advertising.

Below, are a few additional industry respected resources for learning about HTML, and Email Marketing:

Once you are feeling confident of your coding chops, and you are ready for some work, here are a few reputable places to find freelance gigs:

And a few useful tools for once you are more established in the Email Marketing world:

  • eDataSource (the perfect tool for mining data and analytics from the competition)
  • Litmus (a must have tool to ensure your emails are rendering and looking pretty across multiple platforms and devices)

Good luck HTML students, and potential future Code à la Mode coders! 🙂

Read More