CSS - Probably Quick. Put An Img In A List - Gotta Kill The Bullet

Hi

I've been trying make an <a> anchor nested within a <li> list tag appear on the same row as the bullet, with no avail.

It's hard for me to explain exactly, so I've uploaded two images:

This is how I'd like the list items to appear, substract the extra list item which I have no idea why it appears the
Image 1


This is how the list items appear:
Image 2


Here's the HTML:
Code:

    <div id="primary-sidebar">
      <div class="shadow">
        <div class="tlc"></div>
        <div class="trc"></div>
        <h2 class="box-title">
          Games list
        </h2>
        <div class="box-content-lhz">
          <ul id="games-list">
            <li>
              <a href="/intersection.html?anarchy_online">Anarachy Onlins</a>
            </li>
            <li>
              <a href="/intersection.html?Aion">Aion</a>
            </li>
            <li>
              <a href="/intersection.html">Aries Online</a>
            </li>
            <li>
              <a href="/intersection.html">Cabal Online</a>
            </li>
            <li>
              <a href="/intersection.html">Eve Online</a>
            </li>
            <li>
              <a href="/intersection.html">Guild Wars</a>
            </li>
            <li>
              <a href="/intersection.html">Harrier</a>
            </li>
            <li>
              <a href="/intersection.html">Jaxsos' world</a>
            </li>
            <li>
              <a href="/intersection.html">Kal Online</a>
            </li>
            <li>
              <a href="/intersection.html">Lemmings</a>
            </li>
            <li>
              <a href="/intersection.html">Leiviathan Online</a>
            </li>
            <li>
              <a href="/intersection.html">Party Online</a>
            </li>
            <li>
              <a href="/intersection.html">World of Warcraft (US)</a>
            </li>
            <li>
              <a href="/intersection.html">World of Warcraft (EU)</a>
            </li>
          </ul>
        </div>
        <div class="blc"></div>
        <div class="brc"></div>
      </div>
    </div>

Here's the CSS
Code:

ul {
	padding-left: 2em;	
	list-style: square;
}
#games-list {
	list-style-image: url("/_images/bullet1.gif");
	list-style-position: inside;
	margin: 0px;
	padding: 0px;
}
#games-list li {
}
#games-list a{
	font-weight: bold;
	font-family: verdana, Arial, Helvetica, sans-serif;
	font-size: .9em;
	color: #424547;
	text-decoration: none;
	display: block;
	background: url(/_images/sprite-list.png) top left no-repeat;
	padding: 5px;
	padding-left: 20px;
}
#games-list a:hover{
	background-position: left -40px;
	color: #00a2ff;
}

I'd appreciate anyway help at all, as this has been on my mind for a while.

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.

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.

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!

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;
}

I need to make a list of these movies in CSS, and I'm a bit of a noob.:
Pulp Fiction
The Matrix
Lost In Translation
V for Vendetta
Fight Club

It needs to have the following:
*** a separate CSS document to be the style sheet
*** horizontal lines and blank lines between items as described above
*** assorted colors for different pieces of information
*** class selectors to cause some pieces of information to be Underlined and/or in large type
*** the enlarged first-letter effect
*** a horiziontal line in an in-line style as described above
*** an assortment of generic fonts

Can someone help me out with this? I know its easy but I'm struggling with CSS.

Thanks!

Hi There,

I am coding a design that has a semi transparent menu that uses this:

Code:

#mainnav {
	float: right;
	background: #fafafa;
	filter:alpha(opacity=65); /* IE Proprietary */ 
	opacity: 0.65; /* CSS3 Standard */ 
	-moz-opacity:0.65; /* Mozilla Property */
	height:31px;
	font-size: 1.1em;
}

When I add hover to any of the navigation items that fall within this parent div the transparency is maintained. I need the hover to be solid color, not semi transparent. Is there anyway to kill the transparency on hover?

I have tried adding an 'a:hover' with the maximum opacity (0.99) to #mainnav and also independently to the child elements with no success eg:

Code:

.nav-list-items a:hover {
	display: table-cell;
	height: 31px;
	vertical-align: middle;
	background-color: #ec7404;
	color: #fff;
	filter:alpha(opacity=99); /* IE Proprietary */ 
	opacity: 0.99; /* CSS3 Standard */ 
	-moz-opacity:0.99; /* Mozilla Property */
}

Any pointers would be greatly appreciated.

Thank you!

Hello;
Could anyone tell how to kill the scrollbars from IE, Firefox, Netscape.,please.

My following code just work for IE, it doesn't not affect another browsers.

#newst {overflow: scroll;
overflow-y: scroll;
overflow-x: hidden;
overflow:-moz-scrollbars-vertical;}



<textarea name="newst" id="newst" rows="10" cols="45" ></textarea>

figured it out. don't know how to delete

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;
}

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

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 make the bullet go on the right hand side of the list item rather than on the left?

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