- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Cross Browser Solution for Image Marker in CSS
In order to display an image marker properly in all browsers, a cross-browser solution is required. The text alignment after the image marker is sometimes distorted. To achieve a uniform output, we specify the image to be used as a marker as background and align it accordingly.
Example
The following examples illustrate styling of lists −
<!DOCTYPE html> <html> <head> <style> ul{ list-style-type: none; padding: 0px; margin: 0px; font-size: 1.5em; } ul li{ background-image: url("https://www.tutorialspoint.com/images/spring.png"); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 24px; } </style> </head> <body> <h2>Tutorials</h2> <ul> <li>Java</li> <li>C#</li> <li>C</li> <li>C++</li> <li>Spring</li> <li>Hibernate</li> </ul> </body> </html>
Output
This gives the following output −
Example
<!DOCTYPE html> <html> <head> <style> ul{ box-shadow: inset 0 0 8px orange; list-style-type: none; padding: 12px; padding-left: 20px; margin: 2px; font-size: 1.35em; } ul li{ background-image: url("https://www.tutorialspoint.com/images/css.png"); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 40px; font-style: italic; } </style> </head> <body> <p>Requirements:</p> <ul> <li>Tutorials</li> <li>Interview QA</li> <li>Quiz</li> </ul> </body> </html>
Output
This gives the following output −
- Related Articles
- Setting Cross Browser Opacity using CSS
- Change Bullet Color for Lists with ::marker CSS Selector
- Best Cross Browser Compatibility Testing Tools
- 20 Best Cross Browser Compatibility Testing Tools
- What is cross-browser window resize events in JavaScript?
- Usage of CSS marker-offset property
- Cross-browser drag-and-drop HTML file upload?
- HTML5 Cross Browser iframe post message - child to parent?
- Set the distance between the marker and the text relating to that marker with CSS
- Set image for bullet style with CSS
- Use CSS width property for responsive image
- Achieve Responsiveness for background image with CSS
- How to use a custom png image marker in a plot (Matplotlib)?
- Use CSS max-width property for responsive image
- Set image as a border for elements with CSS

Advertisements