More techniques for restyling lists. A plus link View in your browser heading level 1 Type E: heading level 2 09. The List Issue: Part Two less ul greater less ol greater less li greater 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. heading level 3 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 less head greater , 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 less ul greater and less ol greater tags. So, for these email clients, to define your lists left indent, you either have to apply margin left to your less ul greater and less ol greater tags, or you have to apply margin left to your less li greater tags. Applying margin left to both your less ul greater and less li greater tags, or to both your less ol greater and less li greater tags, will result in the combined amount being rendered, however, so if you’re applying it to your less li greater tags, you’ll also have to reset the styles applied to your less ul greater and less ol greater tags, by applying margin:0; to them. Use important; declarations to override the default, internal and inline styles: heading level 4 CSS less if mso greater less style type equals text slash css greater ul margin:0 important ol margin:0 important li margin left:40px important less slash style greater less endif greater Using a Microsoft conditional comment to apply styles for Outlook 2007, 2010, 2013, 2016 (Explorer). list with 3 items bullet List Item One bullet List Item Two bullet List Item Three out of list 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 less ul greater and less ol greater tags. So, for these email clients, you have to define the spacing above your list by applying margin top to your first less li greater tag, and the spacing below your list by applying margin bottom to your last less li greater tag, by adding a class inside each of the respective opening less li greater tags, and applying styles for them within your Microsoft conditional comment. Once again, use important; declarations to override the default, internal and inline styles: heading level 4 CSS less if mso greater less style type equals text slash css greater ul margin:0 important ol margin:0 important li margin left:40px important li dot first List Item margin top:20px important li dot last List Item margin bottom:20px important less slash style greater less endif greater heading level 4 HTML less li class equals first List Item greater List Item One less slash li greater less li greater List Item Two less slash li greater less li class equals last List Item greater List Item Three less slash li greater Styling the first and the last list item. list with 3 items bullet List Item One bullet List Item Two bullet List Item Three out of list The restyled list for Outlook 2007, 2010, 2013, 2016 (Explorer). The margin top and margin bottom you apply to your other less li greater tags, defines the spacing above and below your other list items. heading level 3 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. heading level 4 Default List Markers list with 1 items bullet Disc out of list list with 1 items 1. Decimal out of list heading level 4 Other List Markers list with 1 items A. Upper Alpha out of list list with 1 items I. Upper Roman out of list list with 1 items black square Square out of list list with 1 items a. Lower Alpha out of list list with 1 items i. Lower Roman out of list list with 1 items white bullet Circle out of list list with 1 items 01. Decimal Leading Zero out of list To style your list item with a non default’ list marker, apply your style inside the opening less ul greater or less ol greater tag it’s wrapped within: heading level 4 CSS less ul style equals list style type:lower roman greater Styling an unordered list with a lower roman list marker. heading level 3 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: table with 9 rows and 2 columns row 1 List Image Support column 1 through 2 List Image Support row 2 List Image Support column 1 Apple Mail mac OS List Image Support column 2 graphic Supported. row 3 List Image Support column 1 Apple Mail i OS List Image Support column 2 graphic Supported. row 4 List Image Support column 1 Thunderbird List Image Support column 2 graphic Supported. row 5 List Image Support column 1 Gmail List Image Support column 2 graphic Not supported. row 6 List Image Support column 1 Yahoo! Mail List Image Support column 2 graphic Supported. row 7 List Image Support column 1 AOL Mail List Image Support column 2 graphic Supported. row 8 List Image Support column 1 link Outlook dot com List Image Support column 2 graphic Not supported. row 9 List Image Support column 1 Outlook 2007, 2010, 2013, 2016 (Explorer) List Image Support column 2 graphic Not supported. out of table Examples of list image support across email and webmail clients. To style your list item with a list image, apply list style image:url( your Image dot gif'); inside your opening less ul greater tag: heading level 4 CSS less ul style equals list style image:url( Tick dot gif'); margin:0 0 0 50px greater A list image (Tick dot gif) applied to an unordered list. list with 1 items List Item One out of list 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 less ul greater tag, and add your image within each of your pairs of less li greater tags: heading level 4 CSS less ul style equals list style:none greater heading level 4 HTML less li style equals margin:0 0 0 20px greater less img src equals Tick dot gif width equals 30 height equals 24 alt equals style equals border:0 greater and nbsp List Item One less slash li greater A hack to display a list image on an unsupported email or webmail client. list with 1 items List Item One out of list 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 less li greater tags, using a negative value: heading level 4 CSS less if mso greater less style type equals text slash css greater ul margin:0 important ol margin:0 important li margin left: minus 40px important less slash style greater less endif greater Hiding list markers from Outlook 2007, 2010, 2013, 2016 (Explorer), by applying margin left to less li greater tags, using a negative value. heading level 3 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 less ul greater and less ol greater tags, and margin left:0; inside each of your opening less li greater tags: heading level 4 CSS less ul style equals padding left:0; list style position:inside greater less li style equals margin left:0 greater Removing an indent from a list. Outlook 2007, 2010, 2013 and 2016 (Explorer) ignore both padding left applied to less ul greater and less ol greater tags, and list style position, so you’ll have to restyle the margin left applied to your less li greater 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. black square Type E: is an email newsletter devoted to typography in email, created by Email Designer and Developer, Paul Airy. Please link email your thoughts, suggestions and questions dot Thank you for subscribing! content info landmark Beyond the Envelope Trademark Copyright Paul Airy, 2018 link plus 44 (0) 7962 177 477 (International) link 07962 177 477 (UK) at Paul Airy link Change your preferences link Unsubscribe If you want to link resubscribe , you know where to reach me! link graphic Tweet