views:

126

answers:

2

I'm building out this landing page and after the second paragraph I have a list of points to which I have applied a list-style-image to the li.actionItem, however I'm getting the default disc instead of my images. I know the url is working because a) I wrote it in absolute form, b) if you enter that absolute url you get the image (see here) and c) I tried applying the icon instead as a background image with some padding for the text and that works.

I can just do that in the end if I have to (the background image with padding version) but I would prefer to write it as a list-style-image. Plus it's just driving me crazy why it won't show up that way and I'd like to know.

Any thoughts or tips?? Thank you!

Here's the relevant markup at a glance...

            <ul id="introPoints">
                <li class="actionItem">performed more than <strong>500</strong> surgeries</li>
                <li class="actionItem">set more than <strong>3,000</strong> fractured bones</li>
                <li class="actionItem">mobilized more than <strong>90</strong> volunteers to Haiti</li>
                <li class="actionItem">sent pastors from our DR hospital to minister to the victims</li>
            </ul>

ul#introPoints {
list-style-image:url (http://blog.helpcurenow.org/images/campaigns/jan2010/haiticrisis/arrow-green-distress.gif);
list-style-type:disc;

}

li.actionItem {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#6e5e4c;
    font-size:14px;
    text-align:justify;
    width:580px;
    font-style:italic;
    margin:10px 0px 10px 20px;
    text-indent:15px;
}
li.actionItem strong {
    color:#dd7439;      
}
+1  A: 

This may or may not be the problem, but according to the css grammar you can't have a space between the url and the left parenthesis..

So do this:

url(/someurl)

Not this:

url (/someurl)
Triptych
Yup, that fixed it. Thanks!!!
JAG2007
+1  A: 

Try using a background image. list-style-image never lines up properly anyway.

background-image:url(...);
background-repeat:no-repeat;
background-position:0px 0px
Diodeus