Show bullet image in menu in firefox

[Ogierini]

Hello Webbakers,

Is it impossible to put a  bullet image in a wb menu in firefox?

In IE it works perfectly, but firefox doesn't show it......

This is my code:

Code Select Expand

.subnav {
   float: left;
   width: 155px;
   padding-top: 60px;
   padding-left: 20px;
   list-style-position: inside;
   list-style-image: url(img/rondje.jpg);    
}.subnav h1 {
   color: #FFE;
   font: bold 16px/24px Arial, Helvetica, sans-serif;
   padding-left: 12px;
   list-style-position: inside;
   margin-top: 20px;
   list-style-image: url(img/rondje.jpg);
}
.subnav ul {margin: 0; padding: 0 0 0;}

.subnav ul ul {margin-left: 10px; padding: 1px 1px 1px;}

.subnav li {
   border-bottom: 1px none #696755;
   list-style: none;
}
.subnav li a {
   background: E5322D;
   color: #FFFFFF;
   display: block;
   padding: 20px 0 8px 12px;
   width: 100px;
   text-decoration: none;
   list-style-position: inside;
   font-weight: bold;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   margin-top: -5px;
   list-style-image: url(img/rondje.jpg);
}

.subnav ul ul li a {
   color: #FFFFFF;
   display: block;
   padding: 8px 0 8px 12px;
   width: 100px;
   text-decoration: none;
   font-weight: bold;
   list-style-image: url(img/rondje.jpg);
   list-style-position: inside;
   background-color: #000000;
}

.subnav li a:hover {
   color: #000000;
   list-style-image: url(img/rondje.jpg);
   list-style-position: inside;
}




Thanks for diving......

Irene

[marathoner]

I didn't test anything...but reviewing the w3.org guidelines it appears that list-style-image can only be applied to elements that have display:list-item. I'd guess that applying the style to and UL element rather than a DIV or H1 might give you the desired results.

[flamenco]

Hi Irene,
It's actually a CSS problem, not a WB one, but I'll take a shot at it because I've seen it myself.  There are several things that effect this, and you can try them.  It's always funny to see something that works in IE and not FF, when it's nearly always the opposite.

One example is when you have "display: inline" somewhere else, and in a particular spot you're using "display: block" to override it.  In this instance,

Code Select Expand

li {display: list-item}
might work better than "display: block".

Another happens when you have floated the content of your div.  For instance, if you have "float: left", you may need to add more "padding-left" to your list items to get them to appear.

Based on your code, I'm guessing that the first example may help.

Good luck!