Issue with list-style-image not displaying properly in Gmail on Chrome browser

Having trouble incorporating images into bullet lists in my email templates, specifically with Chrome. I prefer using list-style-image over background-image on the li tag. Is there a solution for this issue?

ul {
list-style-image: url('../images/Bullet_list_check_sign.png') !important;
display: inline-block !important;
padding-left: 20px !important;
}
ul li {
line-height: 45px !important;
padding-left: 15px !important;
display: list-item !important;
}

<div>
<ul>
<li>Nulla efficitur felis</li>
<li>Nulla efficitur felis</li>
</ul>
</div>

Many thanks, J

htmlcssgoogle-chromegmailhtml-email

Answer №1

Although <ul>, <ol>, and <li> are technically supported in email as semantic tags, styling them reliably with CSS can be a challenge compared to on the web. This often results in the list being displayed differently depending on the email client, which is not ideal.

If you want a consistently formatted list, it's recommended to create it using a <table>:

<!-- Bullet List -->
<table cellpadding="2" cellspacing="2" border="0"> 
  <tr>
    <td style="vertical-align:top;">&#8226;</td>
    <td>List Item 1</td>
  </tr>
  <tr>
    <td style="vertical-align:top;">&#8226;</td>
    <td>List Item 2</td>
  </tr>
  <tr>
    <td style="vertical-align:top;">&#8226;</td>
    <td>List Item 3</td>
  </tr>
</table>

Answer №2

Unfortunately, Gmail does not endorse the use of the list-style-type style. One workaround could involve embedding images inline and simulating bullet positioning to achieve a similar effect.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

PHP POST request with an additional value being sent

Greetings as this is my debut post! Currently, I am facing a challenge in my project. As seen in the screenshot provided, I have several names fetched from the database and displayed in the main menu. Upon clicking the "modal" button, a Bootstrap modal wi ...

phphtml

Safari keyframe animation causing wobbly off-center rotation

When viewed on Safari, the spinning animation appears off-center. How can this issue be resolved? The CSS code responsible for the animation is as follows: html, body { height: 100%; } body { background: #a6b8b1; display: grid; place ...

htmlcss

Is it feasible to implement the Bootstrap GRID System?

Hello there! I am currently exploring a potential scenario. When viewing on a desktop or laptop, the layout should look like this: <div class="col-md-3"> sidebar </div> <div class="col-md-9"> article </div> On a smaller screen, ...

htmlcsstwitter-bootstrap

Bootstrap along with ROR 3.2.21 has a malfunctioning navbar

I am facing an issue with the Home section in the navbar. It used to work perfectly, but suddenly it stopped displaying as intended. I have checked and confirmed that both boostrap.min.js and boostrap.min.css are loaded properly. I have included boo ...

cssruby-on-railsrubyruby-on-rails-3twitter-bootstrap

Trouble encountered while attempting to save canvas as PNG

In our TShirt design portal, we utilize fabric.js for creating designs. I have encountered an issue when trying to save the canvas as a PNG using canvas.toDataURL('image/png'). This action throws a "DOM exception 18" error on Google Chrome, while ...

jqueryhtmlcanvassavepng

Tips on creating a horizontal scrolling effect using the mouse

Is there a way to enable horizontal scrolling by holding down the mouse click, instead of relying on the horizontal scroll bar? And if possible, can the scroll bar be hidden? In essence, I am looking to replicate the functionality of the horizontal scroll ...

javascriptjqueryhtmlcss

Is it recommended to place the styles created by material-ui for child components after the styles generated for the parent component?

Utilizing material-ui, which utilizes JSS for styling a website. I have a component named Layout that applies margin to all its children (using the all children selector & > * in its style). This functionality works, but I would also like the child ...

javascriptcssreactjsmaterial-uijss

Troublesome Display of Badges in Bootstrap 5

My goal is to include a badge on a label, however all it does is change the text color to white <asp:Label CssClass="badge badge-pill badge-success" ID="Label1" runat="server" Text="Label"></asp:Label> ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Leveraging Javascript/jquery to retrieve image data for a specific frame within a video

Query My aim is to optimize the code for image manipulation on a web browser using JavaScript. One possible solution I am considering is utilizing a video file to reduce HTTP requests. Is there a way to extract a single frame from a video in png, jpg, or ...

javascriptjqueryhtmlvideo

JavaScript is unable to make changes to the page once it has finished loading

I have implemented a JavaScript code that allows me to send messages in a chat interface: function sendMessageToChat(conversation, message) { $("#content").html(conversation + message); $(".current-msg").hide(); $(".current-msg").delay(500).fadeIn ...

javascripthtmlfunction

Tips for adjusting the item count in mat-autocomplete

For quite some time now, I've been attempting to adjust the number of items in a mat-autocomplete without any luck. My project involves using material.angular.io Below is a snippet of my code import { Component, OnInit } from '@angular/core&a ...

htmlcssangularangular-material

Tips for customizing column width in v-simple-table with Vuetify.js component

For my most recent projects UI component, I decided to use vuetify.js. I attempted to adjust the width of the th and td elements within a v-simple-table using CSS, but unfortunately, nothing seemed to happen. My goal was to set the width of every th and td ...

cssvue.jsvuetify.js

"An issue with IE9 causing small dots on rounded corners during rendering

Help Needed: Strange IE9 Rendering Issue I'm experiencing an odd rendering problem in Internet Explorer 9. You see those little white dots on the left? What could be causing them? Any suggestions on how to remove them? Microsoft, why always so myst ...

jquerycssinternet-explorer-9

Issue with Box2Dweb's Rope Joint functionality has been identified

I am facing an issue with the Rope Joint code in Box2dweb. Despite running the code in my browser, I am only seeing a blank canvas with no activity. However, when I remove the lines that define the joints (the eight lines following //joints), the code ru ...

javascripthtmlcanvasbox2d

Formatting numbers

I have a set of numerical values in my database, shown below: 1000 1500 10000 12500 100000 890000 1000000 6900000 My objective is to format these numbers for display on the frontend as follows: 1 000 1 500 10 000 12 500 100 000 890 000 1 000 000 6 900 0 ...

phphtmlnumberswhitespace

Modifying the .textcontent attribute to showcase an image using JavaScript

I am working on a website and I want to change editButton.textContent = 'Edit'; so that it displays an image instead of text. var editButton = document.createElement('button'); editButton.textContent = 'Edit'; After exploring ...

javascripthtmlcss

Creating a JSON string that contains HTML output from PHP

My PHP code generates JSON output. <?php $html = utf8_encode($gegevens['tekst']); $html = htmlentities($html); //$html = htmlspecialchars($gegevens['tekst'], ENT_QUOTES, 'UTF-8'); echo json_encode(array( 'titel' ...

phpjqueryhtmljson

What steps should I take to make my include function operational?

As I develop a website for our entertainment company, I encounter language translation issues. Due to our diverse clientele, I implemented a multilingual feature on the site. However, during testing, all the text appeared blank. I suspect that the root of ...

javascriptphpjqueryhtmllanguage-translation

The Gravity Simulation Seems to Be Malfunctioning

My current project involves creating a simulation of gravity and its effects. As I embark on this endeavor, I have come across a puzzling issue that has me stumped. The goal is to have my particle's speed increase exponentially based on the gravitatio ...

javascriptarrayshtmlsimulation

The inability to resize the Bootstrap form box occurs when the <span> element is excluded

Is it possible to resize a form box using .col-md-12 without keeping the code inside a span tag? When I try to remove the span tag (which contains a button), the resizing no longer works as expected. The form box seems to default to a certain size regard ...

phphtmltwitter-bootstraplaravelbootstrap-4