Standard Bullet Appears Along With Custom Bullet

[ericpollard]

I'm not sure how to word this, but the attached image should help illustrate. I am not using any stock black circle bullets on this site, but instead I have customized a little right arrow for standard lists and gray numbers for numbered lists. I don't use <ol> tags for the numbered list, but rather just the standard <ul> and have it written as something like <ul class="number"> and then each list code is written as <li class="number-1"> then number-2, so on, as the list goes on. Anyways, for some reason both the stock black circle appears along with the number or along with the little right arrow. I need the black circle to not be there, but I'm not quite sure what is calling for that circle to appear. Any help is appreciated... Thanks!Screen capture of problem

[Ingolme]

Can you show the HTML you're using?I don't see why you wouldn't use an <ol> tag. It's like you're telling the browser you want an unordered list but using the list to show an order to the viewers.

[ericpollard]

Can you show the HTML you're using?I don't see why you wouldn't use an <ol> tag. It's like you're telling the browser you want an unordered list but using the list to show an order to the viewers.

I'm just using standard HTML. So for the custom bullet it would be <ul class="bullet-5"><li></li>(continued)</ul> For the numbered list it would be <ul class="numbers"><li class="number-1"></li><li class="number-2"></li>(continued)</ul>Honestly I figured the numbered lists that way because the content originated from a Joomla template and that is how they had coded it. So I copy and pasted the content back over to a different platform and there was about 50 numbered lists so instead of changing everything I just went with it. I think it works because I have to call out for an image anyways rather than just a text number. There are probably smarter ways of doing it though I'm sure... So the code is pretty basic which means there must be something in .CSS that says to show the black circle regardless of what type of bullet I select. Right?

[thescientist]

Can you show the HTML you're using?

either link or code

[Ingolme]

I think it has to do with the HTML and not only the CSS. Without any code, how are we supposed to know what's going on?

[ericpollard]

Ok, fair enough. Here is an excerpt from one of the number lists similar, if not the same as what is pictured above. The result is the same on every list so there hasn't been a list that has achieved the correct look. First code box is the HTML and the second code box is part of the CSS that pertains to this problem. Also, here is a link to the specific section of the site that is coded below: http://soundisolationstore.alfatestweb.com...flanking#topic3

<p>Ductwork can be problematic for the simple reason that it canprovide adirect air path for sound to travel. There are many products availablefor taming sound coming through ducts.  Among these are:</p><ul class="number">  <li class="number-1">Duct liner is your ally. Used lined ductwork (insulated ductwork). Lined ductwork contains soundabsorbing materialinside the duct to help destroy sound as it bounces it ways down the“tunnel” created by the duct. Also consider "flex duct" which isflexible and insulated. INSULATION MUST BE INSIDE THE DUCT TO BEEFFECTIVE IN THIS MANNER.</li>  <li class="number-2">Long, complex paths areideal.  Ideally the duct path fromwhere you will be making some noise to where you need it to be quietwould contain bends and be as long as possible. This creates a morecomplex path for the sound to travel, gives the duct liner moredistance/time to do its work. 90 or 180 degree bends in lined duct canbe helpful as they force airborne sound to interact with the duct linermore extensively. Flex ducts within a joist cavity should at least havea serpentine "S" shape.</li>  <li class="number-3">Flex duct can be useful.  Use flexible duct, but only in areaswhere the duct will not be exposed to direct sound. Flexible duct oversome part of the path will break the structural path that the ductprovides. Ducts can radiate sound traveling through the air theycontain, but they can also radiate sound that they carry in their thinmetal shells.</li>  <li class="number-4">Use soffits to cover ductwork exposed to sound.  If ductworkhas to be exposed to sound, it is very preferable to cover it with asoffit. If there is no way to avoid having ductwork exposed to directsound, round duct will perform better than rectangular duct, andcoating the duct with a viscoelastic material can also help. Thin metalducts are little barrier to airborne sound, and therefore they shouldbe exposed as little as possible.</li>  <li class="number-5">Coating a duct: Coating a duct with viscoelastic material can helpmitigate structural sound, but in general this shouldn’t be consideredas valuable as lining the duct.</li>  <li class="number-6">Exposed duct downstream is not a good sound barrier.  If acritical area elsewhere in your construction must have ductwork exposedto the air, make sure the joints in that ductwork are sealed, and alsoconsider coating the ductwork with a dense viscoelastic coating toreduce noise transmission. Even more extensive measures can be taken ifneed be, such as covering exposed duct with mass loaded vinyl orinsulation + vinyl barrier. Many products for this application existand a web search may prove illuminating. Sound can pass out of thinmetal ducts as easily as it can pass into them.</li></ul>

ul.icon-2 li{ background:transparent url(../images/vinetas/icon2.png) no-repeat; padding-left:30px;line-height:22px;}ul.bullet-5 li{ background:transparent url(../images/vinetas/bullet-5.png) no-repeat; padding-left:15px;margin-top:12px;}ol.number li, ul.number li{	list-style-position:outside;	margin:0px;	padding:0;	padding-left: 15px;	margin-top:12px;}li.number-1{ background:transparent url(../images/vinetas/number-1.png) no-repeat 0 2px; }li.number-2{ background:transparent url(../images/vinetas/number-2.png) no-repeat 0 2px; }li.number-3{ background:transparent url(../images/vinetas/number-3.png) no-repeat 0 2px; }li.number-4{ background:transparent url(../images/vinetas/number-4.png) no-repeat 0 2px; }li.number-5{ background:transparent url(../images/vinetas/number-5.png) no-repeat 0 2px; }li.number-6{ background:transparent url(../images/vinetas/number-6.png) no-repeat 0 2px; }li.number-7{ background:transparent url(../images/vinetas/number-7.png) no-repeat 0 2px; }li.number-8{ background:transparent url(../images/vinetas/number-8.png) no-repeat 0 2px; }li.number-9{ background:transparent url(../images/vinetas/number-9.png) no-repeat 0 2px; }/* list end */

[Ingolme]

Well, here's your problem: The numbers are background images:background:transparent url(../images/vinetas/number-1.png)background:transparent url(../images/vinetas/number-2.png)The list has bullets, you're just putting number images as a background for each <li>.I really suggest erasing all that CSS and using an <ol> element.

[ericpollard]

Well, here's your problem: The numbers are background images:background:transparent url(../images/vinetas/number-1.png)background:transparent url(../images/vinetas/number-2.png)The list has bullets, you're just putting number images as a background for each <li>.I really suggest erasing all that CSS and using an <ol> element.

I wonder why they worked on the other site. They worked on the Joomla version of the site and then also worked in this same platform using the same code. The CSS file is all that has changed so there must have been something in there that kept the bullet from appearing... Hmm...

[Ingolme]

It's not semantically correct to use an unordered list element to display an ordered list. I don't see why you don't want to use an ordered list.It's kind of like using CSS to style a <b> tag to make italic text.

[ericpollard]

Right. That makes sense. But I didn't originally choose to create the numbered lists that way. And since there are about 40 numbered lists on the entire site I just figured to follow the existing code since it seems to have worked. That still leaves the issue of the standard bullets though. The standard circle bullet is overwritten with <ul class="bullet-5"> code and then basic <li></li> from there. That still shows a black circle next to it. Isn't that coded correctly? Both methods result in the same error, but the bullet-5 option seems to be coded correctly so to me it seems like something else is causing the end result...

[ericpollard]

Ok, this one can be marked as solved... I found a code in the CSS that referred to my numbered lists and bullet lists. The code read simply:

list-style-position:outside;

I added in a couple lines here to change to this:

	list-style-image:none;	list-style-position:outside;	list-style-type:none;

That took away the little black bullet leaving only the numbers and regular bullets... I wasn't getting worried there. Anyways, thanks for the help. It is appreciated.