When you cut your custom bullet down to size by cropping it in the graphics
program, leave some white space on the right size so that the bullet won’t butt
right up against the text items. Another tip: Be sure to put the .jpg or .gif graphic
file in the same folder as the .htm file that contains the code above. Otherwise,
the browser won’t know how to find the graphic file. (Also see the next section
on specifying locations for graphics.)
Specifying Graphics Locations ..................................................................
If you store a graphics file in the same folder as your .htm or .html file, the
HTML code needs only the name of the graphics file, like this:
list-style-image: url(“mybullet.jpg”)
However, if the file is in another location, you must provide the path to that
location, and do some bizarre punctuating as well — adding a ///, for some
reason. This next example finds this file in the root directory of the c: drive:
list-style-image: url(“file:///C:\mause.jpg”)
Here’s a file located in the \photos subdirectory of the f: drive:
list-style-image: url(“file:///F:\Photos\mause.jpg”)
Here’s the additional bizarre punctuation (///\\) you must add for a local net-
work location:
list-style-image: url(“file:///\\Hp\servr\PHOTOS\mause.jpg”)
If you keep your graphic files on an Internet site, provide the URL address.
Figure 18-3:
Add
custom-
designed
bullets to
your lists
the easy
CSS way.
Chapter 18: Ten Great CSS Tips and Tricks 325
