View Full Version : bulleted lists with images


ladeb
11-08-2006, 04:37 PM
Wondering what I am doing wrong. The code below produces a bulleted list, but with common bullets, not the 'gif'. Also, the bullets continue through the entire list when I want to start and stop them. HELP!
ladeb :tired:

<H1><CENTER><font color="#9999FF">2006-2007 Book List</FONT></CENTER></H1>
<P>
<CENTER>
<font color="#9999FF">
<UL style="list-style-image: url(jul13.gif)">

<li>SEP 17: <A HREF="SheSaidYes.doc">
She Said Yes by Misty Bernall </a>
(hostesses: Charlie/Bug)</li>

<li>OCT 15: Jemmy by Jon Hassler (hostesses: LaDeb/MonkeyGirl)</li></UL>

<font color="#333399"><b>
NOV 19: Love That Dog by Sharon Creech (hostesses: Hoops/Yoyo)</b>
<br><b> NOTE: There is 'pre-work' for this gathering </b>
<br><font color="#9999FF">

<img src="christmas-holly.jpg" width="30" height="30" alt="holly">
<font color="#33660">
DEC: <font color="#FF0000">MERRY CHRISTMAS - <font color="#33660">no club
<font color="#9999FF">
<img src="christmas-holly.jpg" width="30" height="30" alt="holly">

<ul style="list-style-image: url(jul13.gif)">
<li>JAN 21: My Sister's Keeper by Jodi Picoult
(hostesses: open)</li>

<li>FEB 18: tbd by tbd
(hostesses: Pink/Lady)</li>

<li>MAR 18: tbd by tbd
(hostesses: Nise/Car)</li>

<li>APR 15: tbd by tbd
(hostesses: Momof6/3of6)</li>

<li>SUMMER: tbd by tbd
(hostesses: open)</li>
</ul>

J to the izzosh
11-08-2006, 06:37 PM
The list-style-image property is declared properly and should be working. Are your sure that you've uploaded your image and are pointing to its correct location? The way you have it now, "jul13.gif" must be in the same directory as your HTML file.

ladeb
11-08-2006, 06:46 PM
I check that and it is in the same directory. That is what is so confusing! any other thoughts?

shannonlp
11-08-2006, 08:22 PM
I normally build a css style for this. The code below is for link removed
I think this is what you are looking to accomplish.

Hope it helps.

ul {
margin: 0px;
padding: 0px;
}
li {
list-style-position: inside;
margin: 0px;
padding: 0px;
}
li.bullet {
list-style-image: url(../styleImages/backgrounds/flower.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
color: #FFFFFF;
}

li.bullet:hover {
list-style-image: url(../styleImages/backgrounds/flowerRotate.gif);
}
li.bulletLrg {
list-style-image: url(../styleImages/backgrounds/flower.gif);
}

J to the izzosh
11-08-2006, 11:32 PM
Well, they're already using the necessary CSS property correctly. Your code for the unordered list is fine, ladeb. You can even see it in action here (http://jfweb.fastmail.fm/tests/image_bullet.htm). The only thing that could be causing the problem is the surrounding source. You have several unclosed font elements (which you should really discard in favour of CSS) floating around that could be the problem. Try closing them with the appropriate tag (</font>).

Running your source through the W3C markup validator (http://validator.w3.org/) is something you should get in the habit of doing.

angelic.deception
11-09-2006, 07:24 AM
I took the code that you posted, ladeb, and saved it. Then I saved a random image as 'jul13.gif', and viewed it in my browser. It worked fine, so I'm thinking that maybe it's an image problem.

Are you sure the spelling and capitalization is correct? For example, is it 'jul13' or 'Jul13'? I believe the capitalization matters.

Are you sure it's a GIF image?

If you have folders with similar names, are you sure it's in the right one?

Please don't take the above questions as insults, either. I'm not implying that you're an idiot. Those are all mistakes that I myself have made (and will probably continue to make =P), and spent many (frustrating) hours figuring out. I once copied a file into a folder called 'PostSecret', and then wondered why the HTML file in 'postsecret' wouldn't work!

So, yep. Hopefully you find the problem. =)