CSS - Css Bullet List

Hello,

I've created a menu by using an unordered list. Some of the list's items have submenus which is done with another unordered list nested inside the first. So my menu/list would look something like this:

( XX = the bullet image )

Code:

XX Item 1
XX Item 2
XX Item 3
      XX Item 3-1
      XX Item 3-2
XX Item 4

I was wondering if it is possible to use a different bullet image for the nested/indented unordered list? So the menu/list would now look like:

( XX and ZZ = the bullet images )

Code:

XX Item 1
XX Item 2
XX Item 3
      ZZ Item 3-1
      ZZ Item 3-2
XX Item 4

My existing code is:

Code:

<ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li>Item 3
         <ul>
          <li><a href="#">Item 3-1</a></li>
          <li><a href="#">Item 3-2</a></li>
          </ul>
        </li>
        <li><a href="#">Item 4</a></li>
        </ul>

And my existing ul CSS is:

Code:

ul {
	list-style-position: outside;
	list-style-type: square;
	margin-left: 18px;
	margin-bottom: 0px;
	padding: 0px;
	list-style-image: url(/graphics/layout_05/list_bullet.gif);
	margin-top: 0px;
	margin-right: 0px;
}

Thank you for any and all help!

when using unordered lists, is there any way to get more than 3 different bullet designs as you go into deeper nests? after the 3rd nest, the same bullet design is used over and over again.

I've used bullet image for a list but it give more indent then i want to use. I've checked the padding and marging for the other DIV ID's and set all to zero but also there is more indent in the left side. How is it possible to reduce the left indent for the list?

Code:

.test1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	height: 15px;
	color: #003366;
	text-align: left;
	list-style-image: url(bullet1.gif);
	border: 1px solid #000099;
	list-style-position: outside;
	width: 150px;
	margin: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
}
#test2{
	width:215px;
	background-image: url(1bg-menu-v-mid.gif);
	background-repeat: repeat-y;
	border: thin solid #000066;
	float: left;
}

My page http://www.doylecompanylaw.com/doyle.html uses images for the bullets along the left navigation bar. They display perfectly in Opera and Firefox but position themselves too far up in IE. Anyone got any ideas on how to fix this problem? Thanks in advance.

Is there a way to decrease a default spacing between bullet and text in <ul>?

Trying to follow "the best practices" I wanted to convert my menu from bunch of <a></a><br> to unordered list. I already display arrows icon next to menu items so I though it would save me some typing on <img>. But there is one problem: I can't decrease the space between bullet and text. There is bullet, around one em of empty space and then text. It breaks my layout, making menu items wrap to another line, and also wastes some space. I tried to play with margins and padding, but bullets still stay at the same place. Also negative margin and padding doesn't seem to work. If I use a background image instead of bullet, I can adjust the spacing but then the bullet position doesn't seem consistent and get cramped on text in longer lines.

I'm having an issue with a bullet, on www.wirelessguy.net
The last bullet isn't showing for some reason. Here is my HTML and CSS. When I take the class off of the HTML the bullets show up fine.

Code:

<ul class="phoneOneSpecs">
            <li>Color Display</li>
            <li>External Caller ID</li>
        	<li>Voice Activation</li>
            <li>Wireless Internet Access(WAP)</li>
        </ul>

Code:

.phoneOneSpecs, .phoneTwoSpecs, 
{
	position: absolute;
	top: 5%;
	right: 8%;
	font-size: 12px;
	list-style-type: circle;
}

I have followed several tutorials for using a bg image as a bullet and I can't figure out why it isn't working.

Here is the webpage

These are the items that should have a custom bullet (an upside down blue triangle)

Introducing the New ATS/ERS Standards
Spirometry Training is Essential

Guidelines for COPD Emphasize Spirometry Training
COPD: Make Your Goal Early Detection by Tom Petty

Here is the css:
Code:

#newsletter ul {
	padding: 0;
	list-style: none;
}

#newsletter li {
	margin-left: 30px;
	background-image: url(../images/bullet.gif) repeat-n;
}

Here is the xhtml:
Code:

	<div id="newsletter">		
		
	  	<h1>Vitalograph Newsletters</h1>
		
		<div class="row"> <span class="imgLeft"><a href="/pdfs/newsletters/vitalink_fall2005.pdf"><img src="../images/vitalink_fall2005.jpg" alt="vitalink spirometry newsletter" width="125" height="161" border="0" lowsrc="/pdfs/newsletters/vitalink_fall2005.pdf" /></a></span> 
          <h2>Vitalink Newsletter</h2>
			<ul>
				<li>Introducing the New ATS/ERS Standards</li>
				<li>Spirometry Training is Essential</li>
			</ul>

       <span><a href="/pdfs/newsletters/vitalink_fall2005.pdf" target="_blank">Vitalink 
        Fall 2005 (pdf 583 KB)</a></span>
		
		<ul>
		    <li>Guidelines for COPD Emphasize Spirometry Training</li>
			<li>COPD: Make Your Goal Early Detection by Tom Petty</li>
		</ul>
        <span><a href="/pdfs/newsletters/vitalink_spring2005.pdf" target="_blank">Vitalink 
        Spring 2005 (pdf 583 KB)</a></span> 
		</div>
		
		<div class="row">
        <h2>Pharma Newsletter</h2>
		
			<p>The Pharma Newsletter provides up to date information on Vitalograph's latest respiratory 
			clinical trials products and services, news about our people and where you can meet us. 
			It also highlights important new legislation and other relevant news in the industry that 
			we hope will be a useful resource for you. </p>
			
			
          <p><a href="/pdfs/newsletters/pharma_newsletter_jan2006.pdf" target="_blank">Pharma 
          January 2006 (pdf 76 KB)</a></p> 
		  
		  <p><a href="/pdfs/newsletters/pharma_april2006.pdf" target="_blank">Pharma 
          April 2006 (pdf 49 KB)</a></p>
		  
		   </div>
		  
		  <div class="line"></div>
		
		</div>

Im trying to remove the bullet icon from the unordered list but I can't make it work in FF or IE...

XHTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<title>Test</title>
</head>
<body>


<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">General</a></li>
</ul>
</div>

</body>
</html>

and the CSS:
Code:

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

It's probably something really obvious!

I have a <ul> which uses a list-style-image as a bullet, positioned outside. In FF this works fine, but in IE the bullet sometimes displays, sometimes appears obscured. It doesn't appear to be the flickering effect that other posts about bullets have mentioned. It is static and changes only on refresh.

Code:

#content ul {
	list-style-image: url(../assets/bullet.gif);
	list-style-position: outside;
	color: black;
	vertical-align: middle;
}
#content li {
	color: black;
	line-height: 1.8em;
	font-size: 12px;
}

Code:

<div id="content">
    <ul>	  
      <li>organisational development, training and coaching</li>
      <li>learning</li>
      <li>children's services</li>
      <li>evaluation and qualitative research</li>
      <li>public sector policy, strategy and enterprise</li>
      <li>partnership support and communities projects</li>
      <li>working with difficult and complex issues</li>
      <li>building capacity and capability</li>
    </ul>
</div>

It happens on a couple of other computers too. The page is XHTML 1.0 Strict. I tried to use a background image instead but would prefer not to do it this way.
Any advice would be good. Page is at sample page

is it possible to change the bullet point color only of a list?

I'm using an external style sheet and a Drupal site. I am pretty much of a CSS novice. No matter what I do, the default bullet is displaying. Sometimes, in the CSS stylesheet, I can have a graphic show up, but the regular bullet is showing as well.

I want to make a separate bullet that I can use just on certain pages.

It's on the home page of invisibleillnessdocfinder dot com

I don't see anywhere to upload the style sheet to show the code. There is a template, so even though I'm putting "List-style=none" the default tiny bullet shows up.

I'll be glad to email the stylesheet to anyone who can help.

Thanks,
Susan

Hi again, fellas.

I have another annoyance. I've added some bullets that I want text right next to. I can't get the text to line up directly next to the bullets.

I've bordered the two problem div's to make it easier. Could ya'll have a look, please and tell me what is wrong?

http://www.bartlett-family.net/test2

Thanks!

Chris

Hi Guys,

I have what i think is a rather odd problem and i have not seen it before.

I have just finished creating a wordpress template for my blog which can be found at http://www.mobileshop.com/blog i have pretty much got everything sorted (except Safari pushing the RSS info down) but i have one strange problem in IE.

If you look on the right hand bar in a non IE browser you can see that the lists all have a little icon of a phone as the bullet points. Now if you switch to IE then you will see that the first item of each list is missing the phone icon. Even if i swap it back to normal bullets it still misses the first one off.

The <li>'s all seem structured fine in the html and my css is as follows...

Code:

#rightbar ul li ul {
	background: #fff url(images/cat-bg.gif);
	background-repeat: repeat-y;
	color: #03036a;
	padding: 8px;
	margin: 0;
	margin-top: 0;
}
#rightbar ul li ul li {
	margin: 0;
	margin-left: 20px;
	padding: 0;
	line-height: 20px;
	list-style-image: url(images/phone-bullet.png);
	background: none;
	font-size: 120%;
	width: 210px;
}

I know its probably not the best code but i cannot for the life of me work out why IE does not display the icon for the first <li> item, anyone have any ideas?

Thanx

Is it possible to make the bullet go on the right hand side of the list item rather than on the left?

I have a big div container. In this container, I put my content - mostly text. I have a nested div in this container that floats a "sidebar" to the upper-left corner of the container. The sidebar is set up to allow text in the container to fill in around the bottom half of the side bar if the sidebar is shorter than the length of the container.

My problem occurs when I have an unordered list as part of my content. If I have an unordered list sitting to the right of the sidebar, the bullets of the list sit immidiately on the right the left of the sidebar (with no indenting). Below the sidebar, all bulleted lists starts indenting from the left of the container, as expected.

One solution would be to put my content in it's own div, that would be completely separate from the sidebar div. However, if I do this, my content won't fill in around the bottom of my sidebar.

Any advice? Thanks!
- Ryan