CSS - List (bullet) Left Indent Problem.

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.

ok i have a list that has style:none. this list is a link.. now whenever a user wants to hover over it i want to add a pointer (arrow perhaps) on the left of the list...

Code:

#menu li  {
list-style:none;
}
#menu a, #menu a:visited {
	text-decoration:none;
	color:#0033FF;
}
#menu li a:hover {
list-style-image:url(images/pointer.jpg);
}
#menu a:hover {
	
	background-color:#0033FF;
	color:white;
	font-weight:bold;
}

now html
Code:

<ul>
		<li><a href="home.php">Home</a></li>
</ul>

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.

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.

Hi all,

Probably easy, but I'm stumped...

At this test page, I have now included a little horizontal image spacer image IN the list on the right. You'll notice that it has a bullet just like the text links do.

I want the image right where it, preferably with no space above or below it between the "Resume" & "I Can Help" links. If I close the UL tag after Resume, then re-open it before I Can Help, the gap is too big. So I threw the image directly into the list!

But I gotta kill the bullet.

How?

CSS FILE.

Thanks!

Chris

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!

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.

I'm having this issue where 1st paragraph is not indented then all the rest are....

I don't want any indentation.... yet for some reason something is causing it to.


How can i investigate what's causing this?


Thanks.


(btw there's no UL or LI involved in this only P

Hey,
I'm building a rather elaborate javascript popup menu, and I'm trying to get some distinction between some of the long-text menu items. I have no padding after the <p> tags because then I get an extra space at the bottom of my menu. So I'm trying get a hanging indent to work:

my CSS styles:

.question_indent {
text-indent:-10px;
padding-left: 10px;
}

.popupmenu p{
color: white;
font-size: 0.80em;
display: block;
padding-left: 6px;
padding-right: 6px;
margin-top:0px;
margin-bottom:0px;
}

Here's my problem: with my javascript highlight-on-hover function, the hightlight starts in the middle of the first letter of the menu item with a hanging indent. I can't figure out a way to get around it (e.g. can't find anything on google).

function subhighlight(obj) {
if (subhighlighted!=null)
{
//unhighlight last link
subhighlighted.style.background = "";
subhighlighted.style.color = "#f7f7f7";
}
subhighlighted=obj;
if (subhighlighted!=null)
{
//highlight current link
subhighlighted.style.background = "#f7f7f7";
subhighlighted.style.color = "#376092";
}
}

Here's some of my menu item code:

sublinkset[0]= '<p class="question_indent">llooong text repeat llooong text repeat llooong text repeat llooong text repeat.</p>'

sublinkset[0]+='<p class="question_indent"><a href="about_us.html" id="11">But that\'s just a summary. Click to read more.</a></p>'

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

My site is displaying properly and in good way to the bullet that i've used in menu in FF. But in IE 7 bullet and text is too close which make menu un attractive. How can i fix this? any suggestion. if you want you can see nepalmedia . com . np

thanks.

I am a bit new to CSS and am currently in the process of converting a design over to CSS2 and have run into come difficulty.

I've created a list based horizontal menu and I want elements to align to both the left and right ends. Simply by adding "float:left" to most of the elements and "float: right" to others, I was able to get it to work, but strangely only in Internet Explorer, not in Firefox. The latter seems to drop my right aligned image onto the next line.

For the offending code, please see:
http://www.forma3.com/stuff/css/top_menu_v1.html
http://www.forma3.com/stuff/css/css/right_menu_v1.css

Also, any suggestions on the code would be highly appreciated. I have no doubt its more verbose than needed.

Hello,

In my menu, I'm trying to center the first level of the List Items, and left justify the second level of the List Items. So the Menu will be centered and the pop-up links will be left justified. I know it's probably super simple, but for some reason, I'm missing it!

Quote:
/*!!!!!!!!!!! Menu Core CSS !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:10000;}
.qmmc .qmdividery{float:left;width:0px;}
.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:10000;}
.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}
.qmmc {position:relative;zoom:1;z-index:10000;}
.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:10000;}
.qmmc div a,
.qmmc ul a,
.qmmc ul li {float:none;}
.qmsh div a {float:left;}
.qmmc div{visibility:hidden;position:absolute;}
.qmmc
.qmcbox{cursor:default;display:block;position:relative;z-index:10000;}
.qmmc
.qmcbox a{display:inline;}
.qmmc .qmcbox div{float:none;position:static;visibility:inherit;left:auto;}
.qmmc li {z-index:10000;}
.qmmc ul {left:-10000px;position:absolute;z-index:10000;} .qmmc,
.qmmc ul {list-style:none;padding:0px;margin:0px;}
.qmmc li a {float:none}
.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}

Well.. I just remembered I am a member here... I usually figure out my problems.. but this one is just annoying me...

I haven't really decided on colors or anything.. but I just wanted the basic layout with content on my my site... but I get 1 IE problem....

check it out..
http://centralfloridacomputerrepair.com/test.php

the image all the way to the right works fine in FF... but in IE it's below where it should be, and messes up the whole page.

the css is here
http://centralfloridacomputerrepair.com/style.css
(what you are looking at is div#sidetext)

and the css/xhtml validates
http://validator.w3.org/check?verbo...ir.com/test.php
http://jigsaw.w3.org/css-validator/...ir.com/test.php

I just can't figure it out...
I've tried using left: 735px; ... since it's positioned absolute from the top.. but left didnt work with IE either...
it gets to the right place horizontally.. but not vertically...

I tried margin-right with negative.. and it didn't work at all.. it just stayed left all the way.

any ideas?

edit: I've been here a whole year... and this is my first post. HA.