Kelly Moore wrote:
> I've found a pretty creative solution for using images in place of a
> bullet, by Russ Weakley, posted to Listamatic, which uses image
> backgrounds. I'm just having a bit of an issue with alignment and
> showing the whole image.
>
> The image is 18x18 pix, i'm sure there is something with margin or
> padding that i need to do to make the whole image (a start)
> visible?...
>
> http://yakmaster.net/test/bullets.html
Hi Kelly.
Try this:
<!--
#bulletlist,
#bulletlist li {
margin-left: 0;
padding-left: 0;
list-style: none;
}
#bulletlist li {
padding-left: 30px;
background-image: url(images/star_bullet.png);
background-repeat: no-repeat;
background-position: 0 50%;
}
-->
Incidentally, and just out of curiosity, what didn't you like about the
solution I sent you for this the other day (July 9 - included again below)?
I'm just curious.
--Bill
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
<html><head>
<title>style:focus{bullet:image-replacement}</title>
<style type="text/css">
h1,h2,h3,h4,h5,h6,dt {
font-family: sans-serif;
font-weight: 900;
padding: 5px;
text-align: center;
}
h1 {
background-color: #cccccc;
border: 1px solid #101010;
color: #101010;
font-size: 1.5em;
}
h2 {
background-color: #d7d7d7;
border: 1px solid #202020;
color: #202020;
font-size: 1.4em;
}
h3.bii {
background-color: #dedede;
border: 1px solid #999999;
color: #666666;
font-family: sans-serif;
overflow: hidden;
text-align: left;
}
h3.bii span.bullet {
background-image:
url("http://destiney.com/images/btn_small_arrow.png";);
background-position: 0 50%;
background-repeat: no-repeat;
display: inline;
float: left;
height: auto !important;
height: 27px;
margin-right: 5px;
min-height: 27px;
padding-left: 32px;
text-align: right;
width: 2em;
}
h3.bii {display: inline-block}
h3.bii {display: block}
h3.bii {height: auto !important;
height: 1px}
</style></head><body>
<h1>TheHolierGrail:active{version:2.0}</h1>
<h2>style:focus{bullet:image-replacement}</h2>
<h3 class="bii"><span class="bullet">1.</span>| Item Content</h3>
<h3 class="bii"><span class="bullet">100.</span>| Item Content</h3>
<h3 class="bii"><span class="bullet">999.</span>| Item Content</h3>
</body></html>
--
/**
* Bill Brown
* TheHolierGrail.com & MacNimble.com
* From dot concept...to dot com...since 1999.
***********************************************/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
![http://destiney.com/images/btn_small_arrow.png"](http://destiney.com/images/btn_small_arrow.png"){kind=link}