text-shadow on LI

[wiav8r]

Is there a simple way to add text-shadow: to the LI’s on my OL’s and UL’s?

What I need is LI images(disc, circle, decimal, etc.) to be text shadowed the same as text within the LI

here is screen cap of my OL with list-style:decimal; As you can see the images are plain and the text is shadowed.
[img]http://1goodshepherd.org/main/wp-content/uploads/2010/01/Clipboard02.gif[/img]

Here is the markup or that section of page in image;

Code:

WE BELIEVE

1. That it’s by GRACE ALONE people are forgiven. We have peace with God and eternal
   life instead of guilt, fear and condemnation. Grace is God’s undeserved love.
2. That it’s by FAITH ALONE this free gift of forgiveness is received by
   people. Faith is the God-created personal trust in all God has done for us by the life, death and victorious resurrection of His only Son, Jesus Christ.
3. That it’s the SCRIPTURE ALONE that is the absolute source of truth. It is to be believed above human reason, experience or tradition. By “SCRIPTURE” we mean the Bible, the divinely inspired, inerrant Word of God.
4. That New Life is God’s free gift to all who believe in Jesus Christ as their personal Savior from sin. Far from being a license to sin, we have been freed to serve God boldly, carefully, enthusiastically, in joy and peace.
5. We’re guided by the Word, built up in it, strengthened and renewed in God’s love through it. We look forward to a glorious, eternal life with Jesus Christ, the Lord.

I have tried this class

Code:

.entry li {
list-style:decimal;
margin-left:2.0em;
text-shadow: rgb(0,0,0) 1px 1px 2px;
}

but it didnt work like the text-shadow on this class

Code:

.entry { font: 18px Arial, serif;
padding: 5px 0px;
text-shadow: rgb(0,0,0) 1px 1px 2px;
}

The live example of page right click here

Here is my CSS file

Help please

[TheDoc]

"xheathen" wrote:

huh… im going to have to check that out – I’ve never used the list-style-image before, only the background-image property. Good find :)

Most people simply end up using the background property because the list-style system is so bugged.

[JMJ_Web_Services]

My Solutions:

1) (only appears to work in FF3.6 because text-shadow is mostly non-supported due to being a CSS3 attribute)
Make a wrapper DIV around your OL applying the text-shadow attribute to the DIV.

2) For a cross-browser solution:

FIRST) Use a RELATIVE POSITIONED wrapper DIV[/list:u]

THEN) Use

identical duplicate content ABSOLUTE POSITIONED DIVs

DIV1) Text COLOR, TOP and LEFT at 0px, set Z-INDEX to 200[/list:u]

DIV2) Shadow Text COLOR, TOP and LEFT at 2px(or whatever shadow you want), set Z-INDEX to 100[/list:u]
[/list:u]
It’s not a perfect shadow, but will work in all situations and all browsers without being "buggy".

There are more complicated solutions out there so that the shadow appears to fade, but this will work.

[Author]

Posts