Hello all.

I would like to use an image instead of the standard bullet in bulleted lists. After much searching on Google, I have added the following into the CSS box in the settings.

ul { list-style-type: none; }
li
{
font-family: Times New Roman, Georgia, Times, Serif;
font-size: 16px;
font-style: italic;
font-weight: normal;
text-align: left;
margin-top: 4pt;
margin-bottom: 6pt;
line-height: 100%;
color: #990000;
background-image: <img src="http://www.theperdoxrant.com/wp-content/themes/atahualpa332/images/icons/pkbullet1.png" alt="example">;
background-repeat: no-repeat;
background-position: 0 .4em;
color: #000000
}

The default black bullet is gone but my image is not being used. I have checked the image by pasting http://www.theperdoxrant.com/wp-cont.../pkbullet1.png into my browser and the image does come up. So the link is correct.

Questions:

1. What is wrong?

2. Do I always have to use the long version of the url? Is there a short cut I can use?

3. Much to my dismay, I have now discovered that the code above is messing up my sidebar fonts. Yuk. I think the sidebar text must use the same tag <li>.

4. Is there a way I can style my bullets without affecting anything else that I have already styled, such as the contents of the widgets?


Any help would be greatly appreciated.

Thanks in advance.

Here's a thread that might help you.

http://forum.bytesforall.com/showthr...ghlight=bullet

Thanks for that Suzie. I think that relates to the issue of the widgets. It is rather confusing to me being so new at this. Any other ideas?

What about the url for the image? Do I have to key all that information or do I just enter <image>pkbullet1.png> as is shown in the Post/Page Info Items tabs in the theme settings? Do you know?

Try something like this:

background: #FFFFFF url(images/icon.gif) no-repeat top left;

I'll see if I can mess around with it a bit but have to go somewhere shortly.

Thanks to everyone that helped.

I have solved the problem and I am happy to say I am pleased with the results. For a newcomer like me, who works as a typesetter for a living, I find it frustrating that I cannot achieve all the fancy setting that I can in the programs I use such as Quark, InDesign and Framemaker.

I looked and looked for the codes and finally found the codes that have allowed me to achieve some consistency in my headings and body text. Now with the bullets working, I'm a happy camper. By the way, it does NOT surprise that IE seems to deviate in some ways from treating HTML formatting like most other browsers do. Typical of Microsoft, always buck the system so that others may suffer.

Anyway, here is the code that I have added to the theme via the CSS Inserts panel.

h1 {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 34px;
font-style: normal;
font-weight: bold;
text-decoration: none;
font-variant: small-caps;
text-align: center;
margin-top: 40px;
margin-bottom: 0px;
line-height: 100%;
color: #000066;
}
h2 {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 28px;
font-style: normal;
font-weight: bold;
text-align: left;
margin-top: 35px;
margin-bottom: -3px;
line-height: 100%;
color: #0000ff;
}
h3 {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 25px;
font-style: italic;
font-weight: normal;
text-align: left;
margin-top: 25px;
margin-bottom: -12px;
line-height: 100%;
color: #0066cc;
}
h4 {
font-family: Times New Roman, Georgia, Times, Serif;
font-size: 20px;
font-weight: bold;
text-align: left;
margin-top: 10px;
margin-bottom: -14px;
line-height: 100%;
color: #000066;
}
h5 {
font-family: Times New Roman, Georgia, Times, Serif;
font-size: 18px;
font-style: italic;
font-weight: bold;
text-align: left;
margin-top: 16px;
margin-bottom: -12px;
line-height: 100%;
color: #0000ff;
}
h6 {
font-family: Times New Roman, Georgia, Times, Serif;
font-size: 17px;
font-style: italic;
font-weight: normal;
text-align: left;
margin-top: 9px;
margin-bottom: -13px;
line-height: 100%;
color: #0066cc;
}
li {
font-family: Times New Roman, Georgia, Times, Serif;
font-size: 16px;
font-style: normal;
color: #111111;
margin-bottom: 3pt;
margin-left: -16pt;
list-style-image: url(http://theperdoxrant.com/wp-content/...kbullet1.png);
}