How to change ol bullets for clickable images


Tags: html,css

Problem :

I have the ordered list:

<ol>
    <li>Text1</li>
    <li>Text2</li>
</ol>

, and i want to replace bullets for clickable images. I know how to replace bullets for images, but i need clickable images.

My current implementation:

Html:

<ol>
    <li>
        <div class="button speaker"></div>
        Text1
    </li>
    <li>
        <div class="button speaker"></div>
        Text2
    </li>
</ol> 

Css:

.button {
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    left: -30px;
    top: 25px;
    height: 25px;
    width: 25px;
}

.speaker {
    background-image: url(../images/navbuttons/btn_speaker.png);
} 

How it looks now:

enter image description here

What i want:

enter image description here

IE 9, 10, 11 bugs:

enter image description here

It is working in FireFox and Chrome, but is not working in IE. Also i'm looking for a simple and useful solution.

Demo



Solution :

I switched out the div for a span (although an anchor link would probably be better if it's clickable)

JSFiddle Demo

HTML

<ol>
    <li>
        <span class="button speaker"></span>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem dolores magnam labore voluptate vero corporis pariatur neque temporibus magni soluta commodi molestias ducimus explicabo minima!
    </li>
    <li>
        <span class="button speaker"></span>
        Text2
    </li>
</ol

CSS

li {
    list-style: none;
    line-height:25px;
    margin-bottom: 10px;
    padding: 0;
    text-indent: -30px;
}

.button {
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
    height: 25px;
    width: 25px;
    background-color: red;
    display: inline-block;
    vertical-align: middle;
}

.speaker {
    background-image: url(http://lorempixel.com/output/abstract-q-c-25-25-10.jpg);
}

    CSS Howto..

    CSS: How to fake a :hover state?

    How can I use a different CSS using jQuery?

    How to make transition effect on css sprite hover

    How to break CSS inheritance?

    How to make my dynamic table scrollable when mouse clicked?

    How to animate an “:after” using CSS or jQuery

    IE8 only shows css content after event fired

    How to import css file for into Component .jsx file

    How do I get a zooming effect on an image when a user hovers over it? [closed]

    How can you do this in CSS

    How to vertically align an image in a container that fills the page?

    How to debug Font-Awesome icons?

    Button on ng-mouseover & ng-mouseleave won't get shown as expected - AngularJS

    How to read contents of an external script/style?

    CSS div border shows up, but is transparent

    less: how to import multiple css?

    How to remove line break after DIV in CSS

    How to create inheritance with LESS?

    How is the “greater than” or “>” character used in CSS?

    What html or css attribute should I modify so that a mobile browser shows the website with no blank space on the right?

    How to get these timestamps, which come after in the html, to float right on the same line

    How can I print the selected item from bootstrap drop down using jquery or javascript in php

    How to apply CSS properties of one class in another

    How to Indent using HTML or CSS

    How can I vertical align my
  • to the top of this box which uses `display: flex`?
  • How to display source code with indent in a web page? HTML? CSS?

    How to have multiple css print layouts on a single page application?

    How not differ tableview focused rows from other rows?

    How to make input and select to be same width in css

    How to display form labels with more than one element per line? jsfiddle