Controlling Background Size

Hello,

I have a list which we have set up so that the numbers have a background graphic behind them. The problem I am finding is that the background size is dependent on the number and size of digits that appear above it. If you go to this page you will see what I mean:

http://www4.clearlight.com/~sequoia/residential.shtml

Here is the CSS that controls this:

Code:

---

}
.map_dingbat {
        font-weight: normal;
        padding: 2px;
        background-image: url(imgs/map_dingbat.gif);
        background-repeat: repeat;
}
.map_tiny {
        font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma;
        font-size: 10px;
        font-weight: normal;
        color: #000000;
        padding-top: 4px;
        line-height: 20px;
}

---

What I would like to do is set up the CSS so the green background stays the same width for each number so all the numbered boxes are the same width.

erm:

Code:

---

.map_dingbat {
        width: 15px;
        height: 15px;
        text-align: center;
        font-weight: normal;
        padding: 2px;
        background-image: url(imgs/map_dingbat.gif);
        background-repeat: repeat;
        display: table-cell;
}
.map_tiny {

        font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma;
        font-size: 10px;
        font-weight: normal;
        color: #000000;
        padding-top: 4px;
        line-height: 14px;
}

---

Awesome! Thanks for your help.