09. The List Issue: Part Two
| <ul> <ol> <li> |
Unordered list tag. Ordered list tag. List item tag.
Lists are used to display content that’s intended to be quickly and easily digested by the subscriber.
In part one, I looked at the way email and webmail clients render lists by default, and how you can restyle them so that they render in a way that works for your email. In part two, I’ll look at some more restyling techniques.
Applying styles for Outlook 2007, 2010, 2013, 2016 (Explorer).
Apply styles for Outlook 2007, 2010, 2013 and 2016 (Explorer), within a Microsoft conditional comment, inside your emails <head>, to prevent styles for other email and webmail clients being overridden by them.
Outlook 2007, 2010, 2013 and 2016 (Explorer) all ignore padding applied to <ul> and <ol> tags. So, for these email clients, to define your lists left indent, you either have to apply margin-left to your <ul> and <ol> tags, or you have to apply margin-left to your <li> tags. Applying margin-left to both your <ul> and <li> tags, or to both your <ol> and <li> tags, will result in the combined amount being rendered, however, so if you’re applying it to your <li> tags, you’ll also have to reset the styles applied to your <ul> and <ol> tags, by applying margin:0; to them. Use !important; declarations to override the default, internal and inline styles:
CSS
<!--[if mso]><style type="text/css">
ul {margin:0 !important;}
ol {margin:0 !important;}
li {margin-left:40px !important;}
</style>
<![endif]-->
Using a Microsoft conditional comment to apply styles for Outlook 2007, 2010, 2013, 2016 (Explorer).
- List Item One
- List Item Two
- List Item Three
The restyled list for Outlook 2007, 2010, 2013, 2016 (Explorer).
Outlook 2007, 2010, 2013 and 2016 (Explorer) also ignore margin-top and margin-bottom applied to <ul> and <ol> tags. So, for these email clients, you have to define the spacing above your list by applying margin-top to your first <li> tag, and the spacing below your list by applying margin-bottom to your last <li> tag, by adding a class inside each of the respective opening <li> tags, and applying styles for them within your Microsoft conditional comment. Once again, use !important; declarations to override the default, internal and inline styles:
CSS
<!--[if mso]><style type="text/css">
ul {margin:0 !important;}
ol {margin:0 !important;}
li {margin-left:40px !important;}
li.firstListItem {margin-top:20px !important;}
li.lastListItem {margin-bottom:20px !important;}
</style>
<![endif]-->
HTML
<li class="firstListItem">List Item One</li>
<li>List Item Two</li>
<li class="lastListItem">
List Item Three</li>
Styling the first and the last list item.
- List Item One
- List Item Two
- List Item Three
The restyled list for Outlook 2007, 2010, 2013, 2016 (Explorer).
The margin-top and margin-bottom you apply to your other <li> tags, defines the spacing above and below your other list items.
List markers.
List markers are displayed adjacent to each list item. Their size, and their proximity to their respective list item is defined by the email client rendering them, or, in the case of webmail clients, by the browser. disc list markers, for example, are rendered smaller, and further away from list items on Gmail on Chrome, than they are from list items on Gmail on Firefox.
By default, a disc list marker is displayed adjacent to an unordered list item, and a decimal list marker is displayed adjacent to an ordered list item. In addition to disc and decimal, there’re a number of other list marker styles you can apply.
Default List Markers
- Disc
- Decimal
Other List Markers
- Upper Alpha
- Upper Roman
- Square
- Lower Alpha
- Lower Roman
- Circle
- Decimal Leading Zero
To style your list item with a ‘non-default’ list marker, apply your style inside the opening <ul> or <ol> tag it’s wrapped within:
CSS
<ul style="list-style-type:lower-roman;">Styling an unordered list with a lower-roman list marker.
List images.
Instead of displaying a list marker adjacent to each of your list items, you can display a list image. Email and webmail client support for list images is limited, however, and where they aren’t supported, default list markers are rendered. Here are some examples of list image support across email and webmail clients:
|
List Image Support |
|
|---|---|
|
Apple Mail macOS |
|
|
Apple Mail iOS |
|
|
Thunderbird |
|
|
Gmail |
|
|
Yahoo! Mail |
|
|
AOL Mail |
|
|
|
|
|
Outlook 2007, 2010, 2013, 2016 (Explorer) |
|
Examples of list image support across email and webmail clients.
To style your list item with a list image, apply list-style-image:url('yourImage.gif'); inside your opening <ul> tag:
CSS
<ul style="list-style-image:url('Tick.gif'); margin:0 0 0 50px;">A list image (Tick.gif) applied to an unordered list.
- List Item One
A list item styled with a list image.
You can apply a hack, which will allow you to display list images on unsupported email and webmail clients. To do this, apply list-style:none; inside your opening <ul> tag, and add your image within each of your pairs of <li> tags:
CSS
<ul style="list-style:none;">HTML
<li style="margin:0 0 0 20px;"><img src="Tick.gif" width="30" height="24" alt="" style="border:0;"> List Item One</li>
A hack to display a list image on an unsupported email or webmail client.
List Item One
A list image hack applied.
This hack isn’t fully supported on Outlook 2007, 2010, 2013 and 2016 (Explorer), as list-style:none; is ignored, leaving the list marker displayed. To hide the list marker, apply margin-left to your <li> tags, using a negative value:
CSS
<!--[if mso]><style type="text/css">
ul {margin:0 !important;}
ol {margin:0 !important;}
li {margin-left:-40px !important;}
</style>
<![endif]-->
Hiding list markers from Outlook 2007, 2010, 2013, 2016 (Explorer), by applying margin-left to <li> tags, using a negative value.
Removing the indent.
A lists indent serves to pull it away from an emails main body, and draw the subscribers eye towards it. There are instances, however, when it might be appropriate to remove the indent on your list, and align it with the main body.
To remove your lists indent, apply padding-left:0; and list-style-position:inside; inside your opening <ul> and <ol> tags, and margin-left:0; inside each of your opening <li> tags:
CSS
<ul style="padding-left:0; list-style-position:inside;"><li style="margin-left:0;">
Removing an indent from a list.
Outlook 2007, 2010, 2013 and 2016 (Explorer) ignore both padding-left applied to <ul> and <ol> tags, and list-style-position, so you’ll have to restyle the margin-left applied to your <li> tags on these email clients to achieve the same result.
You now have insight into the way email and webmail clients render lists by default, techniques for restyling unordered and ordered lists, and techniques for working with list markers and list images – semantically. ■
Type E: is an email newsletter devoted to typography in email, created by Email Designer and Developer, Paul Airy. Please email your thoughts, suggestions and questions. Thank you for subscribing!