Crossbrowser Solution

The following example displays the image-marker equally in all browsers:

HTML file: Displayed by browser:
<style>
ul {
   list-style-type: none;
   padding: 0px;
   margin: 0px;
}
ul li {
   background-image: url(../html_beg/images/sqpurple.gif);
   background-repeat: no-repeat;
   background-position: 0px center;
   padding-left: 15px;
}
</style>
<body>
<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Pop</li>
</ul>
</body>
  • Coffee
  • Tea
  • Pop




Example explained:

  • For <ul>:
    • Set the list-style-type to none to remove the list item marker
    • Set both padding and margin to 0px (for cross-browser compatibility)
  • For all <li> in <ul>:
    • Set the URL of the image, and show it only once (no-repeat)
    • Position the image where you want it (left 0px and vertical value: center)
    • Position the text in the list with padding-left

Back button Table of Contents Next button