CSS bullet image not showing up

The UL tag rule states "list-style: none;", in other words, no bullet, no image.

Change:

ul { margin:0; padding:0; list-style:none}

to

ul { margin:0; padding:0;}

and providing the path to the image file is correct, it'll work.

Srry, change ul rule to:

ul.ul3 { margin:0; padding:0;list-style-image: url(images/a3.gif);

change li.ul3 to

.ul3 li { line-height:19px;  margin:0px; padding:0px;}

Mind you, after these edits, I'm pretty sure the list won't render the way you want.

So, my CSS code now looks like this:

ul.ul3 { margin:0; padding:0;list-style-image: url(images/a3.gif);}
      .ul3 li { line-height:19px;  margin:0px; padding:0px;}

Now:
1)A bullet image appears in Dreamweaver, but its not a3.gif. Its a regular gray circle bullet.
2)The bullets don't show up in IE 7.

As mentioned, I didn't think it would render the way you want with that code. Setting margin and padding to 0 for both UL and LI will lead to problems.

Firstly, check the file path for the image or check the image resides in the file path. Then just start with the basic css and move on from there:

.ul3 {
    list-style-image: url(images/a3.gif);
}
.ul3 li {
    line-height:19px;
}

Essentially, by setting margin and padding to 0, you're hiding the bullet image.

You could try:

ul { margin:0; padding:0;}

.ul3 li {
list-style-type: none;
line-height:19px;
background:url(images/a3.gif) no-repeat 0 9px;
padding-left:25px;
}

If that doesn't work then it is most probably your image path.

Since the above did not work, I decided to look closer into the path:

My site structure is:

root
>html files
>css
------styles.css
>images
------a3.gif and other images

So, having "images/a3.gif" in my css file will not work will it? If not, how do I code the relative path (I know.. that's a really simple question!)?

In that scenario, the ul rule and path would be:

.ul3 {
      list-style: url(../images/bullet.gif);
}

.ul3 li needs to make no reference to the bullet image

Ok,
     Using the following css code, the bullet images show up fine in Dreamweaver, but in IE7, they don't show up at all. What more do I need to do? Thanks for your patience and help.

.ul3 {
      list-style: url(../images/a3.gif);
}
.ul3 li {
list-style-type: none;
line-height:15px;
padding-left:1px;
}

Delete "list-style-type: none;" from the li style rules.

Wow... still nothing with this code. Again, the bullet images show find in DW, but not it IE.

.ul3 {
      list-style: url(../images/a3.gif);
}
.ul3 li {
line-height:15px;
padding-left:1px;
}

Pls post your whole CSS file contents and any CSS riles in the header. There's probably an inheritance issue.

Here is the css code:

body {
      margin-bottom: 0px;
      font-family: Verdana;
      font-size: 10px;
      font-style: normal;
      line-height: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      color: #525252;
      background-color: #E3DAB1;
}
td, textarea, input, select {
      font-family: Tahoma;
      font-size: 11px;
      color: a49e7e;
      font-weight: normal;
}
.tableDetail {
      font-size: 10px;
      font-family: Verdana;
      color: #49394E;
}
a:link {
      color: #FFFFFF;
      font-family: tahoma;
      font-size: 11px;
      font-weight: normal;
      text-decoration: none;

}
a:hover {
      color: #FFFFFF;
      font-family: tahoma;
      font-size: 11px;
      font-weight: normal;
      font-style: normal;
      line-height: normal;
      font-variant: normal;
      text-transform: none;
      text-decoration: underline;
}
a:visited {
      color: #FFFFFF;
      font-family: tahoma;
      font-size: 11px;
      font-weight: normal;
      font-style: normal;
      text-decoration: none;

}

.text1 {
      font-family: tahoma;
      font-size: 12px;
      color: cc710d;
      font-weight: normal;
}
.text2 {
      font-family: tahoma;
      font-size: 11px;
      font-weight: normal;
      color: e8dfb6;
}
.text3 {
      font-family: tahoma;
      font-size: 12px;
      font-weight: normal;
      color: #FFFFFF;
}
.text4 {
      font-family: tahoma;


      font-size: 10\;
      font-weight: bold;
      color: #FFFFFF;
      font-size: 10px;
      font-weight: normal;
}
.text5 {
      font-family: tahoma;
      font-size: 10px;
      font-weight: normal;
      color: A4A4A4;
}
.text6 {
      font-family: tahoma;
      font-size: 10px;
      font-weight: bold;
      color: #FFFFFF;
}
.text7 {
      font-family: tahoma;
      font-size: 10px;
      font-weight: normal;
      color: #000000;
}
.text8 {

      font-family: tahoma;
      font-size: 10px;
      font-weight: normal;
      color: 94AEC5;
}
.text9 {


      font-family: tahoma;
      font-size: 10px;
      font-weight: normal;
      color: 4E4E4E;
}
.frame {
      border: 1px solid #A49E7E;
}
.designed_by {
      font-family: Arial;
      font-size: 8.5px;
      font-weight: lighter;
      color: #000000;
}
a.a:link {
      font-family: tahoma;
      font-size: 11px;
      font-weight: normal;
      color: cb700e;
      text-decoration: none;
}
a.a:hover {
      font-family: tahoma;
      font-size: 11px;
      font-weight: normal;
      color: cb700e;
      text-decoration: underline;
}
a.a:visited {
      font-family: tahoma;
      font-size: 11px;
      font-weight: normal;
      color: cb700e;
      text-decoration: none;
}
a.b:link {

      font-family: tahoma;
      font-size: 10px;
      font-weight: bold;
      color: 898989;
      text-decoration: none;
}
a.b:hover {
      font-family: tahoma;
      font-size: 10px;
      font-weight: bold;
      color: #839B2E;
      text-decoration: none;
}
a.b:visited {
      font-family: tahoma;
      font-size: 10px;
      font-weight: bold;
      color: 898989;
      text-decoration: none;
}
a.c:link {
      font-family: tahoma;
      font-size: 10px;
      font-weight: normal;
      color: 71A2CB;
      text-decoration: none;
}
a.c:hover {

      font-family: tahoma;
      font-size: 10px;
      font-weight: normal;
      color: 71A2CB;
      text-decoration: underline;
}
a.c:visited {

      font-family: tahoma;
      font-size: 10px;
      font-weight: normal;
      color: 71A2CB;
      text-decoration: none;
}
a.d:link {



      font-family: tahoma;
      font-size: 10px;
      font-weight: normal;
      color: #FFFFFF;
      text-decoration: underline;
}
a.d:hover {


      font-family: tahoma;
      font-size: 10px;
      font-weight: bold;
      color: #FFFFFF;
      text-decoration: underline;
}
a.d:visited {


      font-family: tahoma;
      font-size: 10px;
      font-weight: normal;
      color: #FFFFFF;
      text-decoration: underline;
}
a.e:link {

      font-family: tahoma;
      font-size: 10px;
      font-weight: bold;
      color: 71A2CB;
      text-decoration: underline;
}


a.e:hover {

      font-family: tahoma;
      font-size: 10px;
      font-weight: bold;
      color: #81992B;
      text-decoration: none;
}
a.e:visited {

      font-family: tahoma;
      font-size: 10px;
      font-weight: bold;
      color: 71A2CB;
      text-decoration: underline;
}
a.f:link {

      font-family: tahoma;
      font-size: 10px;
      font-weight: normal;
      color: 898989;
      text-decoration: underline;
}
a.f:hover {

      font-family: tahoma;
      font-size: 10px;
      font-weight: normal;
      color: #81992B;
      text-decoration: none;
}
a.f:visited {

      font-family: tahoma;
      font-size: 10px;
      font-weight: normal;
      color: 898989;
      text-decoration: underline;
}
a.g:link {

      font-family: tahoma;
      font-size: 10px;
      font-weight: bold;
      color: #000000;
      text-decoration: underline;
}
a.g:hover {

      font-family: tahoma;
      font-size: 10px;
      font-weight: bold;
      color: #FF6600;
      text-decoration: underline;
}
a.g:visited {

      font-family: tahoma;
      font-size: 10px;
      font-weight: bold;
      color: #000000;
      text-decoration: underline;
}
.inputstyle {
      font-family: tahoma;
      font-size: 10px;
      font-weight: normal;
      color: #5F726F;
      background-color: #E2EDEB;
      border: 1px solid #333333;
}

.ul3 {
      list-style: url(../images/a3.gif);
}
.ul3 li {
line-height:15px;
padding-left:1px;
}




And here is the Head of my html code:

<html>
<head>
<title>Jack's Old South BBQ :: About Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="swfobject.js"></script>  

<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>

Hmm. Nothing wrong with the css. Can you upload all dependant files to the web for a preview? There's no reason why this bullet shouldn't show...

Is this what you need?

www.domainname.com/dev1/prev

Get rid of the inline style for the margin inside the <ul> tag.

Ok...
     Now I have bullets, but not a3.gif. I re-posted the page if you need to see it. I can't figure out what's going on.

You removed the opening and closing <ul></ul> tags. Should read:

<ul style="ul3">
  <li>3 Time BBQ World Champion </li>
  <li>Award</li>
  <li>Award</li>
  <li>Award</li>
  <li>Award</li>
  <li>Award</li>
</ul>

Thank you sooo much. How the bullet images appear fine: www.domainname.com/dev1/prev.

The only issue is that there seems to be a lot padding on the left. The cell actually starts directly under the "A" in "Awards." What controls this padding? If you want me to post this in a different post, I'll be glad to, since you've solved my first issue. Let me know. Thanks.

Great... Thanks v2Media!