UI Development

Duplicate bullets for list in outlook

The blog is about..?

The blog is about one of the issues while we encounter with outlook. By default, we are getting the bulleted list in outlook(2013,2016..) even if provide the required styles.

let us discuss one of them which we face regularly.

Example:

Here if we observe the following output from one of the templates :

By default, we are getting the bulleted list in outlook(2013,2016..) even if we provide the following code.

ul {
    list-style-type: none; // To remove the bullets in the list
   }

 

Solution :

To avoid this type of issue following code helps you in a better way :

<head>	
   <!--[if gte mso 9]>
  <style>
  li {
      text-indent: -2em; /* Normalise space between bullets and text */
     }
  </style>
<!-[endif]-->
</head>

 

Description:

By keeping this code in your head part of your HTML it will increase the space between the bullets and text, So based on the current template adjust the spaces which result to terminate the bullets out of the body area.

Here these changes are applied only to outlook so this won’t¬†disturb other screens.

Output :

About The Author

Leave a Reply

*